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

Question

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

Я сделал расширенную текстовую область с помощью Quill js. У меня есть следующие опции для панели инструментов:

new Quill('#quilljs-container', {
    modules: {
        toolbar: [
           ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
           ['blockquote', 'code-block', 'link'],

           [{ 'header': 1 }, { 'header': 2 }],               // custom button values
           [{ 'list': 'ordered'}, { 'list': 'bullet' }],
           [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
           [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
           [{ 'direction': 'rtl' }],                         // text direction

           [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
           [{ 'font': [] }],
           [{ 'align': [] }],

           ['clean']                                         // remove formatting button
       ]
    },
    theme: 'snow'
});

<!-- Style -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">

<!-- quill js container -->
<div id="quilljs-container">  </div>

<!-- Add quill js on the project -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

В настоящее время, когда я пытаюсь добавить больше типов, редактирующих опцию 'font' на панели инструментов (например, 'font': ['arial']), опции выбора просто отображают "Sans Serif" вместо отображения опции "Arial". Я вижу параметры по умолчанию ("Sans Serif", "Serif", "Monospace"), а также настраиваемые параметры, которые я хочу добавить.

Кроме того, я попытался настроить атрибуты, показанные в документации, но в моей текущей конфигурации он отображает только параметры по умолчанию. Может быть, я что-то упустил.

Я надеюсь, что я был ясен со своими сомнениями, и кто-то может мне помочь

ОБНОВИТЬ:

Просто чтобы быть немного более понятным, я пытаюсь добавить больше шрифтов после конфигурации контейнера Quill

Контейнер: На простейшем уровне элементы управления панели инструментов могут быть определены простым массивом имен форматов.

27

javascript jquery fonts quill

Источник

user3722718 01 май '17 в 23:51

6 ответов

Решение

Вы можете использовать конструктор JavaScript, чтобы создать собственный выбор шрифта.

На странице быстрого запуска Quill приведен основной HTML -

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

Код, требуемый в инициализаторе JavaScript, выглядит следующим образом:

let Font = Quill.import('formats/font');
Font.whitelist = ['times-new-roman', 'arial'];
Quill.register(Font, true);

let toolbarOptions = [
    [{ 'font': ['', 'times-new-roman', 'arial'] }],

    ['clean']                                         // remove formatting button
];

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

Вам также необходимо добавить следующее в вашу таблицу стилей, где имена в селекторах CSS - это имена в приведенном выше JavaScript:

/* Set droplist names - -item is the currently selected font, -label is the font's appearance in the droplist*/
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='']::before
{
  content: 'Default';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='times-new-roman']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='times-new-roman']::before
{
  content: 'Times New Roman';
  font-family: 'Times New Roman';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='arial']::before
{
  content: 'Arial';
  font-family: 'Arial';
}

/****************************************************
Set the font-family content used for the HTML content.
*****************************************************/
.ql-font-arial {
  font-family: 'Arial';
}

.ql-font-times-new-roman {
  font-family: 'Times New Roman';
}

12

Источник

user10413405 26 ноя '18 в 19:02

FWIW, я скопировал код от Стива Б и сделал его более общим. Таким образом, вам не нужно делать все вставки копий правил CSS и т. Д., Просто укажите шрифты, которые вы хотели бы добавить в массив шрифтов.

// specify the fonts you would 
var fonts = ['Arial', 'Courier', 'Garamond', 'Tahoma', 'Times New Roman', 'Verdana'];
// generate code friendly names
function getFontName(font) {
    return font.toLowerCase().replace(/\s/g, "-");
}
var fontNames = fonts.map(font => getFontName(font));
// add fonts to style
var fontStyles = "";
fonts.forEach(function(font) {
    var fontName = getFontName(font);
    fontStyles += ".ql-snow .ql-picker.ql-font .ql-picker-label[data-value=" + fontName + "]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=" + fontName + "]::before {" +
        "content: '" + font + "';" +
        "font-family: '" + font + "', sans-serif;" +
        "}" +
        ".ql-font-" + fontName + "{" +
        " font-family: '" + font + "', sans-serif;" +
        "}";
});
var node = document.createElement('style');
node.innerHTML = fontStyles;
document.body.appendChild(node);

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

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': fontNames }],
    [{ 'align': [] }],

    ['clean']                                         // remove formatting button
];

// Add fonts to whitelist
var Font = Quill.import('formats/font');
Font.whitelist = fontNames;
Quill.register(Font, true);

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

9

Источник

user573240 31 май '19 в 09:34

Пришлось внести некоторые обновления в ответ @Thomas, но приведенный ниже код прекрасно автоматизирует работу в Quill v1.3.6. Если у вас есть короткий список шрифтов, то необходимый CSS тривиален; но если у вас есть более крупный и / или динамический список, вы захотите автоматизировать его следующим образом:

// Specify Quill fonts
var fontList = ['Arial', 'Courier', 'Garamond', 'Tahoma', 'Times New Roman', 'Verdana'];
var fontNames = fontList.map(font => getFontName(font));
var fonts = Quill.import('attributors/class/font');
fonts.whitelist = fontNames;
Quill.register(fonts, true);

// Add fonts to CSS style
var fontStyles = "";
fontList.forEach(function(font) {
    var fontName = getFontName(font);
    fontStyles += ".ql-snow .ql-picker.ql-font .ql-picker-label[data-value=" + fontName + "]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=" + fontName + "]::before {" +
        "content: '" + font + "';" +
        "font-family: '" + font + "', sans-serif;" +
        "}" +
        ".ql-font-" + fontName + "{" +
        " font-family: '" + font + "', sans-serif;" +
        "}";
});

// Configure Quill editor options
var toolbarOptions = [
    [{ 'font': fonts.whitelist }],
    ['bold', 'italic', 'underline'],
    ['clean'] 
];

var quill;
$(function() {
    // Append the CSS stylesheet to the page
    var node = document.createElement('style');
    node.innerHTML = fontStyles;
    document.body.appendChild(node);

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

// Generate code-friendly font names
function getFontName(font) {
    return font.toLowerCase().replace(/\s/g, "-");
}

Соответствующая ссылка на документы Quill - https://quilljs.com/guides/how-to-customize-quill/, хотя приведенные здесь примеры довольно неполны.

7

Источник

user250328 23 май '20 в 14:56

Принятый ответ в основном отличный, но важно отметить, что formats/fontна самом деле ошибочен и не работает с протестированным Quill 1.3.7.

Для меня сработало:

~~let fonts = Quill.import("formats/font");~~

let fonts = Quill.import("attributors/style/font");
fonts.whitelist = ["initial", "sans-serif", "serif", "monospace"];
Quill.register(fonts, true);

4

Источник

user1455661 25 янв '20 в 15:02

Смог добраться до этого кода благодаря этому ответу здесь . Я нашел лучший ответ, просто обновите свои js и css кодом, который у меня ниже

2

Источник

20 окт '21 в 08:53

Другие вопросы по тегам javascript jquery fonts quill

user5372008 02 май '17 в 01:35 2017-05-02 01:35 · Accepted Answer · 2017-05-02 01:35

Это то, что вам нужно.

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

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

Обновление:

Я прочитал документацию, чтобы помочь вам, и они упоминают, что

На простейшем уровне элементы управления панели инструментов могут быть определены простым массивом имен форматов...

Кроме того, вы можете вручную создать панель инструментов в HTML, передав элемент DOM или селектор в Quill; и это решение, представленное в этом ответе. С другой стороны, в документации не упоминается, но после попытки многих способов загрузки данных с использованием массива (без какого-либо успеха) я заметил, что это невозможно. Итак, вот мой вклад и причина, почему я разместил это обновление. Я сделал эквиваленты (JS и HTML) для ручной реализации.

Пользовательская панель инструментов может быть создана с использованием HTML и конструктора JS. Конструктор получит #toolbar-container как toolbar в modules раздел.

Затем вы можете создать ту же структуру, используя только HTML теги. Концепция очень похожа. Например:

Если в JS мы объявляем массив следующим образом: ['bold', 'italic', 'underline', 'strike'] в HTML будет:
<span class="ql-formats"> <button class="ql-bold"></button> <button class="ql-italic"></button> <button class="ql-underline"></button> <button class="ql-strike"></button> </span>
В JS есть [{ 'header': 1 }, { 'header': 2 }] в HTML будет
<span class="ql-formats"> <button class="ql-header" value="1"></button> <button class="ql-header" value="2"></button> </span>

Итак, здесь у вас есть полный пример в этом фрагменте кода:

// Add fonts to whitelist
var Font = Quill.import('formats/font');
// We do not add Sans Serif since it is the default
Font.whitelist = ['inconsolata', 'roboto', 'mirza', 'arial'];
Quill.register(Font, true);


// We can now initialize Quill with something like this:
var quillObj = new Quill('#quilljs-container', {
  modules: {
    toolbar: '#toolbar-container'
  },
  placeholder: 'This is a font test...',
  theme: 'snow'
});

<!-- Style -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
  /* Set dropdown font-families */
  
  #toolbar-container .ql-font span[data-label="Sans Serif"]::before {
    font-family: "Sans Serif";
  }
  
  #toolbar-container .ql-font span[data-label="Inconsolata"]::before {
    font-family: "Inconsolata";
  }
  
  #toolbar-container .ql-font span[data-label="Roboto"]::before {
    font-family: "Roboto";
  }
  
  #toolbar-container .ql-font span[data-label="Mirza"]::before {
    font-family: "Mirza";
  }
  
  #toolbar-container .ql-font span[data-label="Arial"]::before {
    font-family: "Arial";
  }
  /* Set content font-families */
  
  .ql-font-inconsolata {
    font-family: "Inconsolata";
  }
  
  .ql-font-roboto {
    font-family: "Roboto";
  }
  
  .ql-font-mirza {
    font-family: "Mirza";
  }
  
  .ql-font-arial {
    font-family: "Arial";
  }
  /* We do not set Sans Serif since it is the default font */
</style>
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">


<div id="standalone-container">
  <div id="toolbar-container">
    <span class="ql-formats">
      <select class="ql-font">
        <option selected>Sans Serif</option>
        <option value="inconsolata">Inconsolata</option>
        <option value="roboto">Roboto</option>
        <option value="mirza">Mirza</option>
        <option value="arial">Arial</option>
      </select>
      <select class="ql-size"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
      <button class="ql-link"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-header" value="1"></button>
      <button class="ql-header" value="2"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-indent" value="-1"></button>
      <button class="ql-indent" value="+1"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-direction" value="rtl"></button>
      <select class="ql-align"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-script" value="sub"></button>
      <button class="ql-script" value="super"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-clean"></button>
    </span>
  </div>
</div>
<!-- quill js container -->
<div id="quilljs-container"></div>
<!-- Add quill js on the project -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>