Come posso aggiungere un nuovo formato (tag <hr>) a Quill.js?

Question

Desidero aggiungere un pulsante che aggiungerebbe un tag <hr> all'editor quill.js (beta).

Qui il fiddle.

<!-- Initialize Quill editor --> 
    <div id="toolbar-container"> 
     <span class="ql-formats"> 
      <button class="ql-hr"></button> //here my hr-button 
     </span> 
     <span class="ql-formats"> 
      <button class="ql-bold"></button> 
      <button class="ql-italic"></button> 
     </span> 
    </div> 

    <div id="editor"> 

     <p>Hello World!</p> 
     <hr> // this gets replaced by <p> tag automatically *strange* 
     <p>Some initial <strong>bold</strong> text</p> 
    </div> 

ho inizializzare il mio editore:

var quill = new Quill('#editor', { 
     modules: { 
      toolbar: '#toolbar-container' 
     }, 
     placeholder: 'Compose an epic...', 
     theme: 'snow' 
     }); 

Qui aggiungo una funzionalità <h1> tag per il mio editore e funziona molto bene:

$('.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, '<h1>'+text+'</h1>'); 
    }) 

Ora cerco lo stesso per un <hr> tag, che non funziona affatto:

$('.ql-hr').on("click",function(){ 

     var range = quill.getSelection();  
     quill.pasteHTML(range.index, '<hr>'); 
    }) 

il tag <hr> nell'iniziale div#editor viene sostituito con un tag <p>. E la funzionalità dei pulsanti che ho aggiunto non funziona per i tag <hr>, ma per altri tag funziona. So che il tag <hr> non è implementata a Quill.js, che è anche il motivo per cui ottengo questo output della console:

d'oca: barra degli strumenti ignorando allegando in formato inesistente hr select.ql-hr

C'è un modo per risolvere questo?

Answer 1

ho ancora idea del perché la questione ha downvotes, ma comunque ecco la soluzione:

Importa l'embed blot - importante: non "blocco", non "embed", "Blocco/embed"!

var Embed = Quill.import('blots/block/embed'); 

definire una nuova classe che si estende che incorporano

 class Hr extends Embed { 
      static create(value) { 
       let node = super.create(value); 
       // give it some margin 
       node.setAttribute('style', "height:0px; margin-top:10px; margin-bottom:10px;"); 
       return node; 
      } 
     } 

Definire il tag

 Hr.blotName = 'hr'; //now you can use .ql-hr classname in your toolbar 
     Hr.className = 'my-hr'; 
     Hr.tagName = 'hr'; 

scrivere un gestore personalizzato per il <hr> pulsante

 var customHrHandler = function(){ 
      // get the position of the cursor 
      var range = quill.getSelection(); 
      if (range) { 
       // insert the <hr> where the cursor is 
       quill.insertEmbed(range.index,"hr","null") 
      } 
     } 

Registra il tuo nuovo formato

 Quill.register({ 
      'formats/hr': Hr 
     }); 

istanzia l'Editor con i selettori a destra nel vostro HTML

 var quill = new Quill('#editor', { 
      modules: { 
      toolbar: { container: '#toolbar-container', 
       handlers: { 
        'hr': customHrHandler 
       } 
      } 
      }, 
      theme: 'snow' 
     }); 

La parte HTML rimane lo stesso. L'intera funzionalità ora < può essere eseguita in modo simile allo <img> format.

Grazie, utile comunità.