Insert and get html content with quilljs editor

get-set-html-quilljs-editor.js

const editor = $('.editor');

const quill = new Quill(editor);

// set html content
quill.setHTML = (html) => {
  editor.root.innerHTML = html;
};

// get html content
quill.getHTML = () => {
  return editor.root.innerHTML;
};

// usages
quill.setHTML('<b>Hello my friend</b>');

quill.on('text-change', () => {
    console.log('get html', quill.getHTML());
});

Thank you! I was looking for this

Nice! thank you!!

sid enote: it only worked for me when I did:

// get html content quill.getHTML = () => { return quill.root.innerHTML; };

Equivalently:

Quill.prototype.getHTML = function () {
    return this.container.querySelector('.ql-editor').innerHTML;
};

Quill.prototype.setHTML = function (html) {
    this.container.querySelector('.ql-editor').innerHTML = html;
};

This method has been removed and dangerouslyPasteHTML method is used instead of it

Equivalently:

Quill.prototype.getHTML = function () {
    return this.container.querySelector('.ql-editor').innerHTML;
};

Quill.prototype.setHTML = function (html) {
    this.container.querySelector('.ql-editor').innerHTML = html;
};

Only this worked for me. Nothing else. The new method 'dangerouslyPasteHTML ' does not work for me, it gives back "undefined" for; class, src and alt. I do not understand at all what is the problem. First time I tried to use 'dangerouslyPasteHTML ' it worked but next day nothing except this way. I have no idea why..

import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';

Quill.prototype.getHTML = function getHTML() {
  const contents = this.getContents().ops;
  const converter = new QuillDeltaToHtmlConverter(contents, {
    encodeHtml: true,
    inlineStyles: true,
  });
  return converter.convert();
};

Quill.prototype.setHTML = function setHTML(html) {
  this.pasteHTML(html);
};

This worked for me too, specially to get the editor styles inlined instead of getting ql-... class names on the HTML which wouldn't work in contexts where QuillJS styles aren't loaded.

It uses the built in function to inject HTML into the editor (pastHTML) which should be a better route to implement this in case the selectors above don't work the next version due to internal implementation changes on the editor. It also uses quill-delta-to-html which helps in getting the css syles inlined and is a more structured way to convert Delta to HTML and follows the design guidelines of QuillJS.

If you aren't getting the desired output. It could be because your html content is encoded.

Use this to convert it.

var Title = $('<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(Title);

This code will output

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

After this you can use this command to set the html content in quill editor

quill.root.innerHTML = realHTML;

or even this:

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

Its proper your html is in the real html format before setting the value on quill. Else the html tags would be displayed verbally.