javascript - bootstrap - ¿Cómo puedo agregar un nuevo formato(etiqueta<hr>) a Quill.js?

tinymce

Question

Quiero agregar un botón que agregaría una etiqueta <hr> al editor quill.js (beta) .

Aquí el 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>

Inicializo mi editor:

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

Aquí agrego una funcionalidad de etiqueta <h1> a mi editor y funciona muy bien:

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

Ahora intento lo mismo con una etiqueta <hr> , que no funciona en absoluto:

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

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

la etiqueta <hr> en el div#editor inicial se reemplaza con una etiqueta <p> . Y la funcionalidad del botón que agregué no funciona para las etiquetas <hr> , pero para otras etiquetas funciona. Sé que la etiqueta <hr> no está implementada en Quill.js, por eso también obtengo esta salida de consola:

pluma: barra de herramientas ignorando adjuntar a formato inexistente hr select.ql-hr

¿Hay alguna forma de arreglar esto?

Answer 1

Todavía no tengo idea de por qué la pregunta tiene votos abajo, pero esta es la solución:

Importe la blot incrustación - importante: no "bloque", no "incrustar", "bloque / incrustar"!

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

Definir una nueva clase que amplíe eso.

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

Define tu etiqueta

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

Escriba un controlador personalizado para el botón <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")
            }
        }

Registre su nuevo formato

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

Crea una instancia de tu editor con los selectores correctos en tu HTML

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

La parte HTML sigue siendo la misma. Toda la <hr> funcionalidad se puede hacer de forma similar al formato <img> .

Gracias, comunidad útil.