CODEWITHSUNDEEP
javascriptjsonquill
Tony
Tony

Reputation: 825

How to read in existing data into Quill JS

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!

Upvotes: 23

Views: 28012

Answers (8)

AamirR
AamirR

Reputation: 12198

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.

Upvotes: 1

Rijo
Rijo

Reputation: 2718

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.

Upvotes: 2

illnr
illnr

Reputation: 800

// 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...)

Upvotes: 2

Evan
Evan

Reputation: 1082

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

Upvotes: 5

Alankar More
Alankar More

Reputation: 1115

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

Upvotes: 21

Remy
Remy

Reputation: 894

  • 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);

Upvotes: 3

Tony
Tony

Reputation: 825

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);

Upvotes: -1

Ben Browitt
Ben Browitt

Reputation: 1872

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.

Upvotes: 24

Related Questions