Как добавить пользовательские шрифты в редактор QuillJS? - PullRequest
Новая
       39

Как добавить пользовательские шрифты в редактор QuillJS?

0 голосов
/ 16 февраля 2019

Я хочу иметь возможность добавлять собственные семейства шрифтов в мой редактор Quill JS, используя параметры панели инструментов через JavaScript, а не определяя их через HTML.

Ниже приведен код, который представляет собой тот же кодвзяты из документации: 

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      
  [{ 'indent': '-1'}, { 'indent': '+1' }],          
  [{ 'direction': 'rtl' }],                       

  [{ 'size': ['small', false, 'large', 'huge'] }],  
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'color': [] }, { 'background': [] }],

  [{ 'font': [] }],       // Here, how do I specify custom font families??

  [{ 'align': [] }],


];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

Код работает здесь: https://codepen.io/anon/pen/VgVZMg

Есть ли способ сделать это?Кроме того, я предполагаю, что мне нужно включить ссылку на шрифты Google для каждого шрифта, который я хочу использовать, верно?

Спасибо

1 Ответ

0 голосов
/ 26 февраля 2019

Вы можете найти свой ответ в этом списке:

Как добавить типы шрифтов на Quill JS с помощью параметров панели инструментов?

Процесс такой, что вам нужно 4Компоненты:

Тег выбора с классом ql-font.Это будет содержать новые параметры шрифта.Добавьте новые шрифты в белый список.Это должно быть определено перед вызовом конструктора Quill в Javascript.Определите семейство шрифтов для каждой метки в раскрывающемся списке.Пример: font-family: "Inconsolata" Определите семейства шрифтов содержимого, которые будут использоваться в текстовой области.Следуя примеру в 3-м компоненте: .ql-font-inconsolata {font-family: "Inconsolata";}

для получения дополнительной информации посетите ссылку.

...