Vaciar y restablecer un editor de texto enriquecido con JavaScript
Borra contenido, restaura el documento inicial y gestiona el reinicio del formulario sin perder borradores por accidente.
Vaciar y restablecer son acciones distintas
Vaciar sustituye el documento por un valor vacío. Restablecer recupera un documento inicial definido. Ninguna acción elimina registros de la base de datos ni imágenes subidas. Conserva la instancia del editor y no sustituyas su DOM con innerHTML.
Ejecuta el ejemplo completo
Sirve los archivos del editor desde tu aplicación. El ejemplo confirma acciones destructivas, conserva los cambios si se cancela y lee el HTML actual al enviar. No hace peticiones de red. El formulario nativo restaura el título; el documento se restaura explícitamente.
<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>Coordina el reinicio con el guardado automático
El guardado automático puede interpretar el reinicio como una edición normal. Decide si debe guardarse, pausarse o iniciar un borrador nuevo. Un reinicio en el cliente no cancela una escritura ya aceptada por el servidor. Serializa los guardados, comprueba versiones y espera la confirmación antes de anunciar una eliminación en el servidor. Este ejemplo no incluye guardado automático ni borrado de datos almacenados.
Prueba antes de integrarlo
Cancela ambas confirmaciones y comprueba que se conservan título y documento. Vacía solo el documento. Modifica ambos campos y restaura el formulario inicial. Prueba el teclado, títulos largos y pantallas de 320px. No prometas que Deshacer recuperará una sustitución programática; conserva un borrador de recuperación si hace falta.