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!

score 16 · Answer 1 · answered Oct 16 '16 at 18:45

16

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

answered Oct 16 '16 at 18:45

Keno

3,694
2
21
40

if I use `.innerHTML` I will not be able to edit further. – Abhishek Ekaanth Dec 21 '17 at 09:54
@AbhishekEkaanth: Not sure what your problem is, maybe open a new question ? – Keno Dec 21 '17 at 16:27
this is not how you use quilljs. So many ppl do this. Just delta! – Cas Bloem May 13 '18 at 20:18

score 4 · Answer 2 · answered Oct 15 '16 at 19:49

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.

score 3 · Answer 3 · answered Sep 29 '16 at 21:24

3

Quill doesn't output to HTML natively. But there are plugins that can render data from Quill, such as quilljs-renderer

answered Sep 29 '16 at 21:24

Mike P

2,797
2
21
25

How to render QuillJS rich-text output to HTML

3 Answers3