Include Headings in Quill Rich Editor

Question

I am working on quill rich editor, i need all headings (h1....h6). I have tried different ways but it just shows (h1 and h2) and sometimes it show 3 headings.

Html code:

<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 Code:

<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>

How can i display all headings in quill editor? I would appreciate if anypne guide me through this. Thanks,

Answer 1

Try the following ( copy paste gives new line ):

 //#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>

Answer 2

As reported in the documentation, the Normal should be selected , in order to be highlighted. Also the value should not be there or the editor will wrap the Blot with an undefined tag.

The ql-toolbar class will be added to the toolbar container and Quill attach appropriate handlers to <button> and <select> elements with a class name in the form ql-${format} . Buttons element may optionally have a custom value attribute.

  <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>

So applied in the heading case:

      <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>