Can't find the "setHTML" function.

[crowdwave]

Hello

I can't seem to find the "setHTML" function.

Here's a screenshot in Chrome. I would have expected it to be displayed next to setText.

Can anyone suggest what I am doing wrong?

thanks

[crowdwave]

Hmmm.... it looks like this function is perhaps not in the latest version of Quill?

How then can I set the HTML programatically? I'm trying to load the initial data into the control upon load.

thanks!

[benbro]

https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml

[crowdwave]

For those who might come later on.......

The actual problem that I was trying to solve is how to save data from quill and restore it next time quill is loaded. I assumed that the right way to do this was to save the HTML and then write it back somehow.

Further learning appears to indicate that in fact the correct way to load and save data is to save quills "delta" object in your database or whereever and this delta can be reloaded via "setContent()"

[rw3iss]

Alternatively, can save and load html with getting the innerHTML of the quill-editor to save, and then restore by putting this html in between the editor containers html tags before initializing that container with Quill.

var quill = new Quill('#editor', {
    theme: 'snow'
});

// retrieving:
var content = quill.container.innerHTML;

// setting:
<div id="#editor">
   your initial html/content would go here
</div>

// or can set programmatically:
quill.clipboard.dangerouslyPasteHTML(0,content);

[gustawdaniel]

In my opinion methods to get and set HTML should be described in official docs.

Of course with notice that using these methods is bad practice.

But It is confusing if it is not described at all.

[jillesvangurp]

The quill api is indeed confusing on this.

How to do implement a proper edit, save, reload use case is not clear at all from the documentation. I think the fundamental confusion is that many users want to treat this like a normal input component that has a value that you can get/set. IMHO a reasonable expectation but it seems quill does not work that way. I understand why (security) but it makes it needlessly hard to use.

After a bit of googling, I have slightly better workaround that seems to beat some sense into this API.

  getValue() {
    // we want the content, not some Delta thingy or plain text without the formatting
    return this.quillEditor.root.innerHTML
  }

  setValue(text) {
    // resets the editor to empty
    this.quillEditor.setContents([])
    // initialize the content to exactly what we have in our server (i.e. what we saved the last time as validated/sanitized by our server)
    this.quillEditor.clipboard.dangerouslyPasteHTML(0, text)
  }

The dangerouslyPasteHTML seems intended to protect users against script injection. Understandable but it kept getting extra new lines when I modified innerHtml directly. Of course, our server of course cleans up the html and validates stuff. So, there is zero risk with this.

I understand that Deltas are really nice for all sorts of advanced things we don't need. I also think storing that in a DB is a bad idea. I insist on something standardized like markdown or sanitized html without leaking implementation details about whatever was used for editing.

[shepelevstas]

I use Quill with Vue and I need to store html in db because often I just want to show formatted rich text (not editable). So I just paste it in div.ql-container > div.ql-editor. And sometimes I save the initial content and then I want to "Discard Changes" and set editor content back to the initial. So the setHtml function that would not trigger text-change event would be very helpful. Now I have to do something ugly like this:

// when the Vue component with Quill editor is mouted
this.$refs.editor.innerHTML = this.value
this.quill = new Quill(this.$refs.editor, {})
this.quill.on('text-change', ()=>{
  this.notUserInput = true
  this.$emit('input', this.$el.querySelector('.ql-editor').innerHTML)
})

// and then watching for external changes
value(val){
  if (!this.notUserInput){
    this.$el.querySelector('.ql-editor').innerHTML = val
  } else {
    this.notUserInput = false
  }
}

[Toemsel]

In my opinion methods to get and set HTML should be described in official docs.

Of course with notice that using these methods is bad practice.

But It is confusing if it is not described at all.

I don't see why that should yield any bad practice. The quill editor isn't famous for its security, hence we need to extract the html in order to sanitize it. As long as the user has 100% access to the editor and its code, security is not an argument to me.

However, the server should validate every user's input. And that does include the quills content as well.

[praveenkpatare]

If you are trying to bind the content of quill editor to a value, so that it gets loaded on any event you can try this..
<div id=<> bind:this={editor} bind:innerHTML="{<>}" contenteditable="true"/>