This matters when loading an older CMS announcement into an editor. The task is to make its words and supported formatting editable, then save a usable document. Treat the original HTML as a separate source copy until that migration is checked.
Replace the document deliberately
Assume quill is an initialized Quill 2 instance with the heading and bold formats enabled. This fragment is a small, developer-controlled fixture:
const initialHtml =
'<h2>Workshop check-in</h2>' +
'<p>Bring your <strong>registration number</strong>.</p>';
quill.clipboard.dangerouslyPasteHTML(initialHtml, 'api');
Run the replacement once when the intended record loads. Repeating it on every UI render can overwrite the author's changes. When switching records, decide how to handle an unsaved edit before replacing it.
Do not substitute quill.root.innerHTML = initialHtml. That writes to the editing DOM directly and bypasses the documented content API. An editor can look correct while its document state and subsequent edits disagree.
The word dangerously in the API name carries a real condition. HTML from a user, database, or imported file needs a deliberate sanitization policy before this route. The tiny literal above demonstrates the call; it is not a sanitizer or a safe importer for arbitrary pages.
Decide whether you mean replace or insert
For an existing announcement, a replacement should leave one heading and one paragraph. If the old announcement remains above the new one, inspect whether the code supplied an insertion index.
// Inserts at the start; existing content remains after it.
quill.clipboard.dangerouslyPasteHTML(0, '<p>Draft notice</p>', 'api');
Use that indexed form only when inserting is the intended operation. A loading function that accidentally inserts on each retry can accumulate repeated notices.
Check meaning after the import
For the workshop fixture, inspect the editable heading, the exact words, and the bold phrase. Then read the Quill document representations: getContents() returns Delta data, while getSemanticHTML() returns an HTML representation.
const editableDocument = quill.getContents();
const exportedHtml = quill.getSemanticHTML();
Inspect those values as data. Displaying exportedHtml in a source panel should show literal characters rather than execute it. For reopening the same editable content, retain a suitable document representation and restore it through the matching API. setContents() accepts a Delta; setText() loads plain text and removes formatting.
Compare the imported content by meaning rather than byte equality. A changed wrapper or normalized tag can still preserve the announcement. A missing heading, lost emphasis, or omitted instruction needs investigation before saving the migrated record. Complex page layouts require a separate conversion decision because Quill's document model does not promise to preserve every HTML/CSS feature.
Match examples to the installed major version
Quill 2 changed Clipboard conversion and removed the deprecated pasteHTML alias. Check the Quill 2 migration notes before copying an older integration.
Our bounded rich-text editor guide takes a different approach: it disables raw HTML import. Use that design when authors only need a limited set of formatting controls. For a migration that needs import, keep the original HTML, inspect the normalized document, edit one phrase, and reopen the saved record before replacing the source copy.