How to render QuillJS rich-text output to HTML

Question

I am a little stuck, I am working with Quill JS editor and have now got to the point where I need to render the output from the editor in a html document and possibly a PDF document (HTML is a priority)

How would I render output like this:

{
  "ops": [
    {"attributes":{"bold":true},"insert":"Test Post"},
    {"insert":"\n\nThis is a test post.\n"}
  ]
}

I have had a look around but cant seem to find out how to do this. I hope someone can help.

Thanks!

Answer 1

editor.root.innerHTML

You will need to style it.

From there you can export to PDF with something like jsPDF or similar or bounce it to the server.

Example:

Getting Quill content

Answer 2

Quill delta itself designed to represent contents, not visualization. as documentation say, delta doesn't assign any meaning to attribute, bold can be <strong> or <b> or <custom tag> in html, it mean you can design your delta to represent your own content.

To render delta in your own format, you can use quill-render. so you can have 1 or more different format for render to your html and pdf.