How to read in existing data into Quill JS

Question

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

How to edit the saved data in quill
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!

score 22 · Answer 1 · answered Sep 27 '16 at 20:45

22

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.

answered Sep 27 '16 at 20:45

Ben Browitt

1,772
8
10

Thanks for the reply. So I have tried this before using the setContents API but it just outputs the string of text "{"ops":[{"insert":"this is a test bit of text\n"}]}" and doesnt create the form. – Tony Sep 28 '16 at 11:02
The codepen link above show you a live demo of setContents. By form you mean the text editor? – Ben Browitt Sep 28 '16 at 11:18

score 20 · Answer 2 · answered Jun 05 '17 at 10:55

20

This works for me. May it will helps some one.

editor.root.innerHTML = "<p><strong class=\"ql-size-large\"><em><s><u>This would be the text that we are going to show in the editor with pre-formatting.<\/u><\/s><\/em><\/strong><\/p>";

Here editor will be your quill instance.

Thanks to this LINK

answered Jun 05 '17 at 10:55

Alankar More

1,107
2
8
26

1

Good answer.. Thanks – Komal Nov 27 '19 at 06:10
5

This is not a good answer for the question, and it's not good practice if you're accepting HTML from user input. Use the deltas to prevent attacks. – eltiare Feb 16 '20 at 19:13

score 5 · Answer 3 · answered Oct 10 '18 at 15:13

I write this for people who is using Laravel. I did it like this:

To store, before submit my form:

        form.submit(function(){
            var description = document.querySelector('input[name=description]');
            description.value = editor.root.innerHTML;                
        })

To edit my form, I load the content:

         var editor = new Quill('#quill-editor', {
            modules: {
                toolbar: toolbarOptions
            },
            placeholder: 'type something',
            theme: 'snow'
        });
        .root.innerHTML = '{!! !empty($quill_editor) ? $quill_editor : ''  !!} ';

And if finally you want to use is as html, you can load it like this in your template:

{!! $description !!}

I hope is useful for someone

I can confirm the above solution worked for me. – Esmay Kapol Aug 20 '21 at 13:19 — Esmay Kapol, Aug 20 '21 at 13:19

score 3 · Answer 4 · answered Dec 21 '16 at 11:31

Create the editor (the example below is for a read only version)
Locate your target (where you want the text to be displayed)
Parse your string content
setContents for your editor

var quill = new Quill('#editor-container', { modules: { toolbar: [] }, readOnly: true, theme: 'bubble'} );
var $target = $('#editor-container');
var $content = JSON.parse($target[0].innerText);
quill.setContents($content);

Rijo · Answer 5 · 2020-11-11T06:42:34.683

2

Quill parses content by its own method.

If you are using HTML directly, use dangerouslyPasteHTML like the following:

quill.clipboard.dangerouslyPasteHTML("<p>here is some <strong>awesome</strong> text</p>");

This will sanitize the HTML by its own method and load HTML.

edited Nov 11 '20 at 06:42

answered Nov 11 '20 at 06:24

Rijo

2,568
1
22
30

score 1 · Answer 6 · answered Jul 12 '19 at 17:00

// parse String
let stringToParse = String.raw`{"ops":[{"insert":"this is a test bit of text\n"}]}`;
// set quill editor instance to Delta state.
quill.setContents(JSON.parse());

setContents from Quill to set editor to Delta.

String.raw to avoid expanding '\t' to ' '. (see also JSON.parse throws error when parsing...)

AamirR · Answer 7 · 2022-01-10T11:29:20.183

I was setting root.innerHTML, but it messes up the actual HTML, the pasteHTML method seems to be working fine, like so:

quill.pasteHTML(YOUR_HTML_HERE, 'silent');

I also got a code editor, and using following method:

let delta = quill.editor.getDelta();
delta.insert(VALUE_HERE, { 'code-block': true });
quill.updateContents(delta, 'silent');

You may also need to clear your contents before using the getDelta method above, like so:

quill.setContents([
  { insert: '\n', attributes: { 'code-block': true } }
], 'silent');

I use to silent the Source so this change is not triggered on my own binded event listeners.

score -1 · Answer 8 · answered Sep 29 '16 at 13:44

So I have managed to find a work around, not sure if it is the correct method, but it works.

Turns out it was javascript escaping the data passed to it.

Essentially when the form fails to submit the errored data is added back to the hidden input field and then javascript reads it from there...

HTML Form:

<input name="post" id="post" type="hidden" data-post-id="{{ old('post') }}">

Javascript:

var postId = $('#post').data("post-id");
quill.setContents(postId);

How to read in existing data into Quill JS

8 Answers8