How to read in existing data into Quill JS

javascript json quill
Tony picture Tony · Sep 27, 2016 · Viewed 16.7k times · Source

I am having real trouble understanding how to work with quill...

Saving the data is not a problem as that pretty straight forward :)

I am a little stuck on two points

  1. How to edit the saved data in quill
  2. How to parse the saved data to create a static page

can anyone offer any advice how to load the delta 

{"ops":[{"insert":"this is a test bit of text\n"}]}

back into the quill editor and how to parse the output to create a page?

Thanks in advance for any replies!

Answer

Ben Browitt picture Ben Browitt · Sep 27, 2016

Use setContents to insert a delta:

quill.setContents({
    "ops":[
        {"insert":"this is a test bit of text\n"}
    ]
});

http://codepen.io/anon/pen/VKWZLd

You can access the raw HTML with:

var html = document.querySelector(".ql-editor").innerHTML

If you are working with raw HTML, you need to sanitize it before you use it.

Related questions

Parse JSON in JavaScript?

I want to parse a JSON string in JavaScript. The response is something like var response = '{"result":true,"count":1}'; How can I get the values result and count from this?

Read More
Convert JS object to JSON string

If I defined an object in JS with: var j={"name":"binchen"}; How can I convert the object to JSON? The output string should be: '{"name":"binchen"}'

Read More
Safely turning a JSON string into an object

Given a string of JSON data, how can I safely turn that string into a JavaScript object? Obviously I can do this unsafely with something like: var obj = eval("(" + json + ')'); but that leaves me vulnerable to the JSON …

Read More