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