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

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.