Как добавить новый формат (<hr>) в Quill.js?

Question

Я хочу добавить кнопку, которая добавит тег <hr> редактору quill.js (beta).

Здесь 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> 

инициализирую мой редактор:

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

Здесь я добавить функциональность в <h1> тегов моему редактору, и он работает очень хорошо:

$('.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>'); 
    }) 

Теперь я попробовать то же самое для <hr> тег, который не работает вообще:

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

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

тэг <hr> в начальном div#editor заменяется тегом <p>. И функциональность кнопки, которую я добавил, не работает для <hr> тегов, но для других тегов она работает. Я знаю, что <hr> тег не реализуется в Quill.js, что также объясняю, почему я получаю этот консольный вывод:

гусиные: панель пренебрегая прикрепляться к несуществующему формату час select.ql-ч

Есть любой способ исправить это?

Answer 1

У меня до сих пор не знаю, почему этот вопрос имеет downvotes, но тем не менее здесь есть решение:

Импорт встраивать blot - главное: не «блок», а не «вставлять», «блок/вставлять»!

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

Определите новый класс, расширяющий что Вставить

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

Определить тег

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

Написать пользовательский обработчик для < ч > кнопку

 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") 
      } 
     } 

Зарегистрировать новый формат

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

Инстанцировать ваш редактор с правильными селекторы в вашем HTML

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

HTML, часть остается тем же самым. Целая функциональность <hr> может быть выполнена аналогично функции <img> format.

Благодарим Вас за полезное сообщество.