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

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

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

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

обновление:

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

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

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

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

затем вы можете создать ту же структуру, используя только 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 is [{ '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>