How to render QuillJS rich-text output to HTML

javascript quill
Tony picture Tony · Sep 29, 2016 · Viewed 16k times · Source

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

Keno picture Keno · Oct 16, 2016 
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

Related questions

How do I post contents of a Quill editor in a form?

I have what I think is a very common scenario. I would normally have this form: <form method="post"> <textarea name="text"></textarea> <input type="submit" value="Save" /> </form> Then …

Read More
How do I retrieve the contents of a Quill text editor

I am using the quill text editor in a javascript app and I need to retrieve the contents of the text editor as a string with the HTML included but the docs are a little sparse on this subject.

Read More
How to add image in Quill JS?

I can't figure out how to get images to work like in the example on http://quilljs.com/. I tried adding <span title="Image" class="ql-format-button ql-image"></span> to the toolbar, which adds the button, but …

Read More