Rich-Text-Editor mit JavaScript leeren und zurücksetzen

Rich-Text-Editor mit JavaScript leeren und zurücksetzen

Inhalt leeren, Ausgangsdokument wiederherstellen und Formular-Reset ohne versehentlichen Entwurfsverlust umsetzen.

Leeren und Zurücksetzen unterscheiden

Leeren ersetzt das Dokument durch einen leeren Wert. Zurücksetzen stellt ein festgelegtes Ausgangsdokument wieder her. Beide Aktionen löschen weder Datenbankeinträge noch hochgeladene Bilder. Behalten Sie die Editorinstanz und ersetzen Sie ihr DOM nicht mit innerHTML.

Vollständiges Beispiel ausführen

Stellen Sie die Editordateien über Ihre Anwendung bereit. Das Beispiel bestätigt destruktive Aktionen, erhält Änderungen beim Abbrechen und liest beim Absenden aktuelles HTML. Es sendet keine Anfrage. Das Formular setzt den Titel nativ zurück; das Dokument wird ausdrücklich wiederhergestellt.

<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>

Zurücksetzen mit automatischem Speichern abstimmen

Autosave kann das Zurücksetzen als normale Änderung behandeln. Legen Sie fest, ob gespeichert, pausiert oder ein neuer Entwurf begonnen wird. Ein Reset im Client widerruft keinen bereits angenommenen Server-Schreibvorgang. Serialisieren Sie Speicherungen, prüfen Sie Versionen und bestätigen Sie eine serverseitige Löschung erst nach erfolgreicher Speicherung. Dieses Beispiel löscht keine gespeicherten Daten und enthält kein Autosave.

Vor der Integration testen

Brechen Sie beide Bestätigungen ab: Titel und Dokument müssen erhalten bleiben. Leeren Sie nur das Dokument. Ändern Sie danach beide Felder und stellen Sie das Ausgangsformular wieder her. Testen Sie Tastaturbedienung, lange Titel und 320px. Versprechen Sie keine Wiederherstellung per Undo nach programmatischem Ersetzen; halten Sie bei Bedarf einen separaten Entwurf vor.

Weiterlesen