Clear and reset a rich text editor in JavaScript
Clear content, restore an initial document and handle form reset without deleting an unsaved draft by accident.
Clear and reset are different actions
Clear replaces the current document with an empty value. Reset restores an explicit starting document. Neither action deletes a database record or an uploaded image. Keep the same editor instance; do not replace its DOM with innerHTML.
Run the complete example
Serve the editor assets through your application. The example confirms destructive actions, preserves edits when confirmation is canceled, and reads current HTML on submission. It makes no network request. The title resets with the native form; the editor is restored explicitly.
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<style>body{font:16px/1.6 system-ui;max-width:960px;margin:24px auto;padding:0 16px}button,input{min-height:44px;box-sizing:border-box}button{padding:8px 16px} .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}</style>
<h1>Clear or reset a rich text editor</h1>
<form id="note-form">
<label>Title <input name="title" value="Project notes"></label>
<div style="max-width:100%;overflow-x:auto"><div id="editor"></div></div>
<div class="actions">
<button type="button" id="clear">Clear content</button>
<button type="reset">Restore initial form</button>
<button type="submit">Check HTML</button>
</div>
<p id="status" role="status" aria-live="polite"></p>
</form>
<script>
const initialHTML = "<h2>Project notes</h2><p>Keep <strong>this starting document</strong>.</p>";
const editor = new RichTextEditor("#editor", { toolbar: "full", height: "320px" });
const form = document.getElementById("note-form");
const status = document.getElementById("status");
editor.setHTMLCode(initialHTML);
document.getElementById("clear").addEventListener("click", () => {
if (!window.confirm("Clear the current document? This demo has no saved backup.")) return;
editor.setHTMLCode("");
status.textContent = "Content cleared. Title unchanged. Nothing was saved.";
});
form.addEventListener("reset", event => {
if (!window.confirm("Restore the initial title and document?")) {
event.preventDefault();
return;
}
// Native reset restores ordinary fields; explicitly restore the editor.
editor.setHTMLCode(initialHTML);
status.textContent = "Initial form restored. Nothing was saved.";
});
form.addEventListener("submit", event => {
event.preventDefault();
// Read live editor data, not the original markup or a stale hidden field.
const html = editor.getHTMLCode();
status.textContent = "Current HTML: " + html.length + " UTF-16 units. No request sent.";
});
window.resetDemo = { editor, initialHTML };
</script>Coordinate reset with autosave
A reset can look like a normal edit to your autosave integration. Decide whether it should be saved, paused or treated as a new draft. A client reset cannot cancel a write already accepted by your server. Serialize saves, use version checks and wait for an acknowledged save before telling the user that server content was removed. This example has no autosave or storage deletion.
Test before adding it to a form
Cancel both confirmations and verify that title and document survive. Clear only the document. Then edit both fields and restore the initial form. Try keyboard submission, long titles and 320px screens. Do not promise Undo will recover a programmatic replacement: keep a separate recovery draft if your product needs one.