Как изменить названия заголовков по умолчанию в Quill JS (реагировать - js)?

Question

Мой текстовый редактор Quill настроен в конструкторе следующим образом:

this.modules = {
            toolbar: {
                container: [
                ...
                [{ 'header': [1, 2, false], 3 }],
                ...]
            }
        };

Он создает выпадающее меню со следующими именами: «Заголовок 1», «Заголовок 2», «Обычный», «Заголовок 3».

Я хочу сохранить значения / функции, привязанные к этим именам, одинаковыми. Я просто хочу изменить имена на: «Заголовок», «Подзаголовок», «Абзац», «Маленький абзац».

Как мне поменять имена на «Заголовок», «Подзаголовок», «Абзац» «Маленький абзац»?

Answer 1

На самом деле поведение заголовка несколько неожиданно. Вы можете достичь желаемого результата двумя возможными способами. Первый подход заключается в настройке панели инструментов редактора с использованием HTML и добавлении нескольких дополнительных деталей:

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

#toolbar .ql-header {
  width: 160px;
}

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

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

<div id="toolbar">
  <div class="ql-formats">
    <select class="ql-header">
      <option value="h1">Title</option>
      <option value="h2">Subheading</option>
      <option value="h3">Small Paragraph</option>
    </select>
    <button class="ql-clean"></button>
  </div>
</div>
<div id="editor">
  <p>Try me...</p>
</div>

Я должен сказать вам, что невозможно установить опцию false, или normal, или абзаца в заголовке. Я уже пытался, и, к сожалению, желаемого результата не появляется. И точно так же я не могу сказать вам, почему. В случае, если вы хотите выяснить причину, я предлагаю вам взглянуть на исходный код заголовка .

Поэтому, чтобы удалить форматирование заголовка и оставить текст как обычный (как простой абзац) Вы можете использовать чистый формат, как показано в предыдущем примере.

Второй подход , который можно использовать для решения вашей проблемы, заключается в создании нового формата. Вы можете настроить этот новый формат для получения значений и вести себя по-разному в соответствии с прошлым значением, что может даже включать удаление самого формата, если передано ложное значение. Вот пример того, как это сделать здесь . В выделенном проекте (№ 1) есть все, что вам нужно.

В итоге , первый подход использует два формата для выполнения того, что вы хотите. Если это не желательно, я предлагаю вам использовать второй подход. Даже если это окажется немного сложнее, это позволит вам достичь именно того, чего вы хотите.