Quill reload content !!!

[Philaupatte]

Hi,
From index.php

<div id="editor"><?=$textFlashInfo?></div>  
<script>
  const quill = new Quill("#editor",{theme:"snow"});
  quill.on('text-change', () => {document.getElementById("flashInfoButtonSummary").removeAttribute("disabled");});
</script> 

Text is appearing fine all correctly formated
Example

a
 1.b
 2.cc
 3.ddd

All is working fine, user makes some text modifications such as 4.eeee and all is good.

From js (process function)

var i = quill.getLength();
var flashInfoTextHtmlFromQuill = quill.getSemanticHTML(0,i);
var flashInfoTextFromQuill = quill.getText(0,i);`

I get the new text that can be processed. GOOD LORD all is perfect.

Now suppose user has made garbage. We need to reset text to its original not by reloading index.php but with a reset js function.

1: From js (reset function)
quill.setText("<?=$textFlashInfo?>");
Here text does not get formatted. I get
<p>a</p><ol><li>b</li><li>cc</li><li>ddd</li></ol> like if html tags were not interpreted.
What is wrong ? How to re-initialize div area ?

2: From js (reset function)
document.getElementById("editor").innerHTML = <?=$textFlashInfo?>;
It does replace the text and in the Quill window , it shows original text perfectly formatted.
However when user enter a new text such as 4.zzzzzzz,
getText return the previous one with 4.eeee that should have been cleared !!! and not the new one 4.zzzzzzz
What is wrong ? How to re-initialize div area ?

Any idea ? thanks

[michaelbluejay]

I know this is an old thread, but others will find it in the future, so for them, here's a solution to #1, assuming I understand your problem correctly. (If I don't, then this still solves a different problem.)

To update the editor with new HTML contents and have that content be interpreted and editable, I haven't found a built-in way to do that. Here's the workaround I figured out:

(1) Remove the "const" from initializing Quill, b/c we'll need to initialize it again, and const items can't be re-initialized or deleted.

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

(2) Remove the toolbar, b/c once I re-initialize it, a new toolbar will be created.

document.querySelector('.ql-toolbar').remove()
`
(3) Populate the field, using .innerHTML

document.getElementById('editor').innerHTML = newConentsVariable

(4) Make a new editor to act on the conents.

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

[codeWonderland]

There is a much easier option available, it's just not the easiest to find in the documentation / examples. If you have your defaultHtml saved to a variable, let's call it defaultHtml, and an initialized quill instance at my_quill, you can do the following:

    const delta = my_quill.clipboard.convert({html: defaultHtml});
    my_quill.setContents(delta, 'silent');

I just did this with a project last night, and it works beautifully, thought I wish there was a simple setHtml() function that was well defined in the documentation, rather than having to convert it first

[michaelbluejay]

Thank you, codeWonderland, that worked like a charm.

I don't know how you found it in the docs. I just looked again, and even knowing what to look for, I still can't find it. Seems like such a common need that it would be explained front and center.