How do you insert HTML into a QuillJS?

Question

Is it possible to insert raw HTML into a Quill? I've been searching the documentation but couldn't find anything.

If it's not possible, can I at least convert HTML into a Quill Delta?

The reason I need this is because I am grabbing the raw HTML of the text taken from Quill, so I can view it later in HTML style. Have I been doing everything wrong, and need to keep a Delta version of it as well?

Renan Bronchart · Answer 1 · 2020-05-19T08:35:36.817

67

On version 1.3.6, You can use Quill.setContents(value) method.

And insert your new HTML like this:

const value = `<h1>New content here</h1>`
const delta = quill.clipboard.convert(value)

quill.setContents(delta, 'silent')

Quill documentation: https://quilljs.com/docs/api/#setcontents

edited May 19 '20 at 08:35

answered Apr 28 '20 at 14:35

Renan Bronchart

926
17
24

1

You mean 1.3.6. Thanks anyway. – Bronzato May 19 '20 at 08:02
1

`convert()` isn't documented at https://quilljs.com/docs/modules/clipboard/ Should `dangerouslyPasteHTML` be used instead? – Marius Aug 11 '22 at 17:34
This is a much better all-around solution than setting `quill.root.innerHTML`. When you don't convert it to a delta, the inner text will become corrupt if there's any special characters for one thing. – tkefauver Dec 06 '22 at 13:37
Also if you are using quill 2.0 `quill.clipboard.convert` the parameter is destructured as `{html, text}` so in this example you would need to use `quill.clipboard.convert({html: value})` or the result will be an empty delta. – tkefauver Dec 06 '22 at 13:41

score 46 · Answer 2 · answered Oct 08 '17 at 05:24

46

I have found a way, looking extremely closely at the documentation. Method quill.clipboard.dangerouslyPasteHTML('raw html'); does the trick. https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml

answered Oct 08 '17 at 05:24

Thanks, this worked for me. Directly setting the innerHTML or `.html()` with jQuery was causing the Quill editor to re-format and change some of the HTML that we were passing in. This method worked for us. – neilsimp1 Apr 23 '19 at 14:20

score 5 · Answer 3 · answered Jul 18 '18 at 19:06

Another way to insert HTML into Quill is by using vanilla JavaScript.

You can set your html to a variable, such as htmlToInsert.

Then target the contenteditable div created by Quill, by getting it by its class, ql-editor.

Finally, set the innerHTML of that div to the HTML you want to insert.

For example:

var htmlToInsert = "<p>here is some <strong>awesome</strong> text</p>"
var editor = document.getElementsByClassName('ql-editor')
editor[0].innerHTML = htmlToInsert

score 2 · Answer 4 · answered Jan 25 '20 at 11:54

2

There is better way to do this:

const htmlMurkup = '<p>Good</p>'
let quill = new Quill()
quill.container.firstChild.innerHTML = htmlMurkup

answered Jan 25 '20 at 11:54

Kamil Ismagilov

576
4
11

2

You should definitely use Quill's API when performing operations like this. – Brady Liles Apr 28 '21 at 13:21
Technically setting innerHTML works. And the Quill will fire a text-change event. But you can not control what the `source` value is. And therefore it will be difficult to reliably set (or not set) a dirty flag or something like this. – May 22 '21 at 16:25

score 2 · Answer 5 · answered May 24 '21 at 22:10

2

I believe the most straight forward way is this:

quill.root.innerHTML = '<p>HTML Goes Here</p>'

You can also obtain the HTML from this property as well.

answered May 24 '21 at 22:10

Steven Malone

21
1

score 1 · Answer 6 · answered Apr 17 '22 at 08:46

1

Just to add to @user1993629's answer, using quill.clipboard.dangerouslyPasteHtml(0, "raw html") will place the cursor at the end of the pasted content

answered Apr 17 '22 at 08:46

Kwame Opare Asiedu

2,110
11
13

score 0 · Answer 7 · answered Mar 28 '22 at 23:18

If you aren't getting the desired output. It could be because your html content is encoded.

Use this to convert it.

let realHTML = $('<textarea />').html("&lt;p&gt;&lt;strong&gt;Hello&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;").text();
console.log(realHTML);

This code will output

<p><strong>Hello</strong></p>

After this you can use this command to set the html content in quill editor

quill.root.innerHTML = realHTML;

or even this:

let initialContent = quill.clipboard.convert(realHTML);
quill.setContents(initialContent, 'silent');

Its proper your html is in the real html format before setting the value on quill. Else the html tags would be displayed verbally.

How do you insert HTML into a QuillJS?

7 Answers7

Linked