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

Я хочу добавить кнопку, которая добавит тег <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, и поэтому я получаю этот вывод консоли:

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

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

Ответ 1

Я до сих пор не знаю, почему вопрос имеет downvotes, но однако вот решение:

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

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

Определите новый класс, который расширяет этот 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';

Напишите пользовательский обработчик для <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> Формат.

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

Ответ 2

Недостаточно представителей, чтобы комментировать, поэтому отправка в качестве ответа для решения незначительной проблемы.

Окно приглашения по умолчанию, вызванное встраиванием, показанным в @Suisse great answer, должно быть обработано в обработчике панели инструментов (со вторым параметром), например, так:

var toolbarOptions = {
  handlers: {
    // ...
    'hr': function(value) {
       this.quill.format('hr', true);
    }
  }
}

Исходное обсуждение -
Документация: Как избежать "приглашения" по умолчанию при вызове пользовательских встроенных блотов через модуль панели инструментов