Instructobit
The Quill.js library generally uses Delta objects to control its content, this consists of a list of objects to implement in a given sequence in order to achieve the desired output. To insert 2 simple lines of text into the Quill editor we can create the following Delta:
var content = [
{ text: 'Hello' },
{ text: 'World', bold: true }
];
More examples can be found in the official guide.
These Delta objects work fantastically for the most part and produce a reliable output and adding a layer of security to your content. However for some use cases we may need to directly interact with the raw HTML within the Quill editor.
Retrieving the raw HTML from within your Quill editor
Say we start off with the following basic text editor:
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
And paste the following text into the editor:
We can retrieve a Delta object for this according to the documentation as follows:
quill.getContents();
Which would give us the following object:
{"ops":[
{"insert":"Hello world!\nThis is a test paragraph\n"}
]
To get this same content but in raw HTML we can access the root element of quill and user the innerHTML attribute:
quill.root.innerHTML;
This would return the string:
"<p>Hello world!</p><p>This is a test paragraph</p>"
Setting the content of your Quill editor using raw HTML
There seem to be 2 best ways of getting around this
Quick and dirty - can be used to restore previously saved raw HTML from the editor
The most straight forward way of doing this would be by setting the innerHTML attribute directly to your raw HTML like so:
quill.root.innerHTML = 'Hello world!<br>This is a test paragraph';
As you will notice however, Quill modifies this input quite substantially on insertion, I've made use of the <br> element above which is not used by the editor to demonstrate the input formatting changes. If you retrieve the output of the editor again using the innerHTML attribute, you will get the following HTML:
"<p>Hello world!</p><p><br></p><p>This is a test paragraph</p>"
As you can see this has wrapped the two sentences, and even the <br> element in paragraph elements.
This method works best for when you are only going to be working with Quill editor content, as you can quite reliably set the innerHTML attribute to a previously acquired innerHTML and the formatting will not change. However if you intend on using this to import raw HTML from another somewhere else it may not be sufficient (without some major cleaning from your side)
The official way - best for importing raw HTML from a non-Quill environment
According to the docs, the official way to import HTML into your document is by using the following statement:
quill.clipboard.dangerouslyPasteHTML(0, 'Hello world!<br>This is a test paragraph');
This will do most of the formatting changes for you as you can see by the new result of innerHTML:
"<p>Hello world!</p><p>This is a test paragraph</p>"
It has still wrapped our 2 sentences in paragraphs, but at least this time it has removed the extra <br> element, resulting in an output that more closely resembles the objective.
The first argument to this function is the index location of where to insert the raw HTML, so if you are not starting off with a blank editor you can first clear it like so:
quill.root.innerHTML = '';
quill.clipboard.dangerouslyPasteHTML(0, 'Hello world!<br>This is a test paragraph');
If you have any questions or want to add anything, feel free to leave a comment below!
