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.