¿Cómo se inserta HTML en un QuillJS?

¿Es posible insertar HTML sin formato en un Quill? He estado buscando en la documentación pero no pude encontrar nada.

Si no es posible, ¿puedo al menos convertir HTML en un Quill Delta?

La razón por la que necesito esto es porque estoy capturando el HTML sin procesar del texto tomado de Quill, para poder verlo más tarde en estilo HTML. ¿He estado haciendo todo mal y también necesito mantener una versión Delta?

En la versión 1.3.6, puede usar Quill.setContents(value) método.

E inserte su nuevo HTML así:

const value = `<h1>New content here</h1>`
const delta = quill.clipboard.convert(value)

quill.setContents(delta, 'silent')

Documentación de la pluma: https://quilljs.com/docs/api/#setcontents

He encontrado una manera, mirando muy de cerca la documentación. Método quill.clipboard.dangerouslyPasteHTML('raw html'); Hace el truco. https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml

Otra forma de insertar HTML en Quill es usando JavaScript estándar.

Puede configurar su html en una variable, como htmlToInsert.

Luego apunta a la contenteditable div creado por Quill, al obtenerlo por su clase, ql-editor.

Finalmente, establezca el innerHTML de ese div al HTML que desea insertar.

Por ejemplo:

var htmlToInsert = "<p>here is some <strong>awesome</strong> text</p>"
var editor = document.getElementsByClassName('ql-editor')
editor[0].innerHTML = htmlToInsert

Hay una mejor manera de hacer esto:

const htmlMurkup = '<p>Good</p>'
let quill = new Quill()
quill.container.firstChild.innerHTML = htmlMurkup

Creo que la forma más directa es esta:

quill.root.innerHTML = '<p>HTML Goes Here</p>'

También puede obtener el HTML de esta propiedad.

Si no está obteniendo el resultado deseado. Podría deberse a que su contenido html está codificado.

Usa esto para convertirlo.

let realHTML = $('<textarea />').html("&lt;p&gt;&lt;strong&gt;Hello&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;").text();
console.log(realHTML);

Este código generará

<p><strong>Hello</strong></p>

Después de esto, puede usar este comando para configurar el contenido html en el editor Quill

quill.root.innerHTML = realHTML;

o incluso esto:

let initialContent = quill.clipboard.convert(realHTML);
quill.setContents(initialContent, 'silent');

Es correcto que su html esté en el formato html real antes de establecer el valor en la pluma. De lo contrario, las etiquetas html se mostrarían verbalmente.

Solo para agregar a la respuesta de @ user1993629, usando quill.clipboard.dangerouslyPasteHtml(0, "raw html") colocará el cursor al final del contenido pegado