Vider et réinitialiser un éditeur de texte enrichi en JavaScript
Effacer le contenu, restaurer le document initial et gérer la remise à zéro du formulaire sans perdre un brouillon par accident.
Distinguer effacement et réinitialisation
Effacer remplace le document par une valeur vide. Réinitialiser restaure un document initial défini. Ces opérations ne suppriment ni enregistrement en base ni image téléversée. Gardez la même instance et ne remplacez pas son DOM avec innerHTML.
Exécuter l’exemple complet
Servez les fichiers de l’éditeur depuis votre application. L’exemple confirme les actions destructives, conserve les modifications en cas d’annulation et lit le HTML actuel à l’envoi. Aucune requête réseau n’est envoyée. Le titre est rétabli par le formulaire natif ; le document est restauré explicitement.
<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>Coordonner avec l’enregistrement automatique
L’enregistrement automatique peut considérer une réinitialisation comme une modification normale. Décidez s’il faut enregistrer, suspendre ou créer un brouillon. Le client ne peut pas annuler une écriture déjà acceptée par le serveur. Sérialisez les enregistrements, vérifiez les versions et attendez la confirmation avant d’annoncer une suppression côté serveur. Cet exemple ne contient ni enregistrement automatique ni suppression de données stockées.
Tester avant l’intégration
Annulez les deux confirmations et vérifiez que titre et document restent intacts. Effacez seulement le document. Modifiez ensuite les deux champs et restaurez le formulaire initial. Testez le clavier, les titres longs et les écrans de 320px. Ne promettez pas qu’Annuler récupérera un remplacement programmatique ; conservez un brouillon de récupération si nécessaire.