I want to add a button which would add a `&lt;hr&gt;` tag to the [quill.js (beta)][1] editor.

Here the [fiddle][2].

    &lt;!-- Initialize Quill editor --&gt;
        &lt;div id=&quot;toolbar-container&quot;&gt;
            &lt;span class=&quot;ql-formats&quot;&gt;
              &lt;button class=&quot;ql-hr&quot;&gt;&lt;/button&gt;  //here my hr-button
            &lt;/span&gt;
            &lt;span class=&quot;ql-formats&quot;&gt;
              &lt;button class=&quot;ql-bold&quot;&gt;&lt;/button&gt;
              &lt;button class=&quot;ql-italic&quot;&gt;&lt;/button&gt;
            &lt;/span&gt;
        &lt;/div&gt;
        
        &lt;div id=&quot;editor&quot;&gt;
        
          &lt;p&gt;Hello World!&lt;/p&gt;
          &lt;hr&gt; // this gets replaced by &lt;p&gt; tag automatically *strange*
          &lt;p&gt;Some initial &lt;strong&gt;bold&lt;/strong&gt; text&lt;/p&gt;
        &lt;/div&gt;
        
        
I initialize my editor:


     var quill = new Quill(&#39;#editor&#39;, {
            modules: {
              toolbar: &#39;#toolbar-container&#39;
            },
            placeholder: &#39;Compose an epic...&#39;,
            theme: &#39;snow&#39;
          });
          
          
Here I add a `&lt;h1&gt;` tag functionality to my editor and it works very well:

      $(&#39;.ql-hr&#39;).on(&quot;click&quot;,function(){
         
          var range = quill.getSelection();      
          var text = quill.getText(range.index, range.length);
          quill.deleteText(range.index, range.length);
          quill.pasteHTML(range.index, &#39;&lt;h1&gt;&#39;+text+&#39;&lt;/h1&gt;&#39;);
      })

Now I try the same for a `&lt;hr&gt;` tag, which doesn&#39;t work at all:

      $(&#39;.ql-hr&#39;).on(&quot;click&quot;,function(){
         
          var range = quill.getSelection();      
          quill.pasteHTML(range.index, &#39;&lt;hr&gt;&#39;);
      })



the `&lt;hr&gt;` tag in the initial `div#editor` gets replaced with a `&lt;p&gt;` tag. And the button functionality I added doensn&#39;t work for `&lt;hr&gt;` tags, but for other tags it works. I know the `&lt;hr&gt;` tag is not implemented to Quill.js, that&#39;s also why I get this console output:

&gt; quill:toolbar ignoring attaching to nonexistent format hr select.ql-hr

Is there any way to fix this?


  [1]: http://beta.quilljs.com/docs/quickstart/
  [2]: https://jsfiddle.net/Lgxkj4ag/

All Quill Solutions on Gang of Coders

Total of 1 Quill Solutions

How can I add a new format (<hr> tag) to Quill.js?