CODEWITHSUNDEEP
javascripthtmlquill
user1993629
user1993629

Reputation:

How do you insert HTML into a QuillJS?

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?

Upvotes: 43

Views: 71993

Answers (7)

Renan Bronchart
Renan Bronchart

Reputation: 992

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

In Quill 2.0, the .clipboard.convert has changed slightly (ref: https://quilljs.com/docs/upgrading-to-2-0#clipboard )

So the working code in Quill 2.0 is:

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

quill.setContents(delta, 'silent')

Upvotes: 78

Chalist
Chalist

Reputation: 3307

if you use Quill v2 you can use this:


const quill = new Quill("#editor", {
  modules: {
    toolbar: toolbarOptions,
  },
  theme: "snow",
});

if (model.value) {
  const delta = quill.clipboard.convert({ html: model.value }); // <- look at html key
  quill.setContents(delta);
}

Upvotes: 0

Joseph Ajibodu
Joseph Ajibodu

Reputation: 1676

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.

Upvotes: 2

Steven Malone
Steven Malone

Reputation: 61

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.

Upvotes: 6

Kamil&#39; Ocean
Kamil&#39; Ocean

Reputation: 616

There is better way to do this:

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

Upvotes: 2

Ethan Ryan
Ethan Ryan

Reputation: 500

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

Upvotes: 7

user1993629
user1993629

Reputation:

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

Upvotes: 50

Related Questions