Включить заголовки в Quill Rich Editor

Я работаю над богатым редактором quill, мне нужны все заголовки (h1....h6). Я пробовал разные способы, но он просто показывает (h1 и h2), а иногда показывает 3 заголовка.

HTML-код:

<div id="standalone-container">
    <div id="toolbar-container">
        <span class="ql-formats">
          <select class="ql-font"></select>
          <select class="ql-header"></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-script" value="sub"></button>
          <button class="ql-script" value="super"></button>
        </span>
        <span class="ql-formats">
          <button class="ql-blockquote"></button>
          <button class="ql-code-block"></button>
        </span>
    </div>
    <div id="editor-container" style="height: 400px;"> </div>
    <input type="hidden" value="" name="blog_description" id="blog_description" required="">
</div>

JS-код:

<script src="{{url('quill/quill.min.js')}}"></script>
<script>           
    var quill = new Quill('#editor-container', {
        modules: {
          // formula: true,
          // syntax: true,
          toolbar: '#toolbar-container'
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
      });
 </script>

Как отобразить все заголовки в редакторе quill? Я был бы признателен, если бы кто-нибудь помог мне в этом. Спасибо,


javascript html jquery quill
person Amir Khan    schedule 02.07.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Попробуйте следующее (скопируйте и вставьте новую строку):

//#region Fix for copy paste giving new line
var Block = Quill.import('blots/block');
Block.tagName = 'div';
Quill.register(Block);
//#endregion

var quill = new Quill('#editor-container', {
  modules: {
    // formula: true,
    // syntax: true,
    toolbar: '#toolbar-container'
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});
p {
  margin-top: 0;
  margin-bottom: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script>
<div id="standalone-container">
  <div id="toolbar-container">
    <span class="ql-formats">
      <select class="ql-font"></select>
      <select class="ql-header">
        <option value="1">Heading 1</option>
        <option value="2">Heading 2</option>
        <option value="3">Heading 3</option>
        <option value="4">Heading 4</option>
        <option value="5">Heading 5</option>
        <option value="6">Heading 6</option>
        <option value="">Normal</option>
      </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-script" value="sub"></button>
      <button class="ql-script" value="super"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
    </span>
  </div>
  <div id="editor-container" style="height: 400px;"> </div>
  <input type="hidden" value="" name="blog_description" id="blog_description" required="">
</div>

person shrys    schedule 02.07.2019
comment
Как я могу удалить пробелы по умолчанию, включенные пером (например, ‹p›‹br›‹/p›)? - person Amir Khan; 03.07.2019
comment
@AmirKhan Я не понимаю, о чем ты спрашиваешь? Вы имеете в виду, когда мы нажимаем Enter? - person shrys; 03.07.2019
comment
Я просто копирую и вставляю контент с несколькими абзацами, перо включает по умолчанию ‹p›‹br›‹/p›, что делает его немного неудобным. Я не хочу, чтобы перо добавляло дополнительные пробелы. - person Amir Khan; 03.07.2019
comment
Я попытался скопировать и вставить, он не добавляет теги ‹p›‹br›‹/p› явно, хотя я понимаю, что они находятся в DOM. - person shrys; 03.07.2019
comment
Позвольте мне очистить это, я пропустил несколько абзацев пером. Добавьте один пробел (один ввод) между каждым абзацем. я сохранил контент в базе данных, и когда я получил его в разделе блогов, перо добавило один дополнительный пробел (т.е. один ввод) между каждым абзацем. - person Amir Khan; 03.07.2019
comment
Спасибо, я воспроизвел это, дайте мне посмотреть, можно ли это решить - person shrys; 03.07.2019
comment
Он ведет себя следующим образом: ‹p›‹br›‹/p› ‹p›Абзац‹/p›‹p›‹br›‹/p› - person Amir Khan; 03.07.2019
comment
Спасибо, это сработало для меня, но теперь я столкнулся с другой проблемой, я печатаю данные как {!! substr($blog['description'],0,200) !!} так как мне нужно всего 200 символов на странице категории. После применения вышеуказанного решения функция substr не работает. Как я могу отобразить определенное количество символов из этого сейчас? - person Amir Khan; 03.07.2019
comment
Ни в коем случае у этого есть только это небольшое количество голосов. Этот ответ идеален. Спасибо!!!!! - person Enzo Dtz; 24.05.2021
comment
@EnzoDtz рад, что это помогло! - person shrys; 24.05.2021

arrow_upward
2
arrow_downward

Как указано в документации, Normal должен быть selected, чтобы его можно было выделить. Также этого значения не должно быть, иначе редактор поместит блот в тег undefined.

Класс ql-toolbar будет добавлен в контейнер панели инструментов, и Quill прикрепит соответствующие обработчики к элементам <button> и <select> с именем класса в форме ql-${format}. Элемент кнопок может дополнительно иметь пользовательский атрибут value.

  <select class="ql-size">
    <option value="small"></option>
    <!-- Note a missing, thus falsy value, is used to reset to default -->
    <option selected></option>
    <option value="large"></option>
    <option value="huge"></option>
  </select>

Так применяется в заголовке падеж:

      <select class="ql-header">
        <option value="1">Heading 1</option>
        <option value="2">Heading 2</option>
        <option value="3">Heading 3</option>
        <option value="4">Heading 4</option>
        <option value="5">Heading 5</option>
        <option value="6">Heading 6</option>
        <option selected>Normal</option>
      </select>
person Giuseppe Leo    schedule 10.09.2020