Mehrere Rich-Text-Editoren auf einer Seite verwenden

RichTextEditor

Ein Formular mit zwei Editoren, eindeutigen IDs, getrennten HTML-Werten und bestätigtem Zurücksetzen erstellen.

Eine Instanz pro Feld behalten

Ein Produktformular kann Zusammenfassung und Details benötigen. Erstellen Sie je Container einen Editor und speichern Sie die Referenzen in einer Map. Laden Sie CSS, Kern und Plugins nur einmal. Verwenden Sie IDs und Instanzvariablen nicht mehrfach. Die Instanzen sind getrennte Dokumente, kein gemeinsames Dokument mit mehreren Wurzeln.

Vollständiges Beispiel ausführen

Stellen Sie die Dateien über Ihre App bereit. Das Beispiel zeigt aktuelles HTML als JSON mit textContent statt innerHTML. Es speichert nichts und sendet keine Anfrage. Die Zusammenfassung lässt sich ohne Änderung der Details wiederherstellen; beide Felder erfordern eine Bestätigung. Änderungen löschen die veraltete Vorschau.

<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}section{min-width:0;margin-block:20px}.editor-scroll{max-width:100%;overflow-x:auto}button{min-height:44px;padding:8px 16px;margin:8px 8px 0 0}pre{white-space:pre-wrap;overflow-wrap:anywhere}</style>
<h1>Two editors, two independent fields</h1>
<form id="product-form">
  <section aria-labelledby="summary-heading">
    <h2 id="summary-heading">Summary</h2>
    <div class="editor-scroll"><div id="summary-editor"></div></div>
    <button type="button" id="restore-summary">Restore summary</button>
  </section>
  <section aria-labelledby="details-heading">
    <h2 id="details-heading">Details</h2>
    <div class="editor-scroll"><div id="details-editor"></div></div>
  </section>
  <button type="submit">Inspect both fields</button>
  <button type="reset">Restore both fields</button>
  <p id="status" role="status" aria-live="polite"></p>
  <pre id="payload"></pre>
</form>
<script>
// Load the assets once. Give every host its own unique ID and instance.
const initial = {
  summary: "<p>A short <strong>product summary</strong>.</p>",
  details: "<h2>Details</h2><p>A separate document with its own formatting.</p>"
};
const editors = {
  summary: new RichTextEditor("#summary-editor", { toolbar: "full", height: "240px" }),
  details: new RichTextEditor("#details-editor", { toolbar: "full", height: "320px" })
};
const form = document.getElementById("product-form");
const status = document.getElementById("status");
const output = document.getElementById("payload");
function resetFields() {
  for (const key of Object.keys(editors)) editors[key].setHTMLCode(initial[key]);
}
resetFields();
function invalidatePreview() {
  output.textContent = "";
  status.textContent = "Draft changed. Inspect again to see current values.";
}
for (const instance of Object.values(editors)) instance.attachEvent("change", invalidatePreview);
document.getElementById("restore-summary").addEventListener("click", () => {
  if (!confirm("Restore only the summary?")) return;
  editors.summary.setHTMLCode(initial.summary);
  invalidatePreview();
});
form.addEventListener("reset", event => {
  if (!confirm("Restore both documents?")) { event.preventDefault(); return; }
  resetFields();
  output.textContent = "";
  status.textContent = "Both initial documents restored. Nothing saved.";
});
function collect() {
  return Object.fromEntries(Object.entries(editors).map(([key, instance]) => [key, instance.getHTMLCode()]));
}
form.addEventListener("submit", event => {
  event.preventDefault();
  // Read both live instances now; never use whichever editor last had focus.
  output.textContent = JSON.stringify(collect(), null, 2);
  status.textContent = "Current fields shown below. No request sent.";
});
window.multipleDemo = { editors, initial, collect };
</script>

Felder ausdrücklich speichern und prüfen

Verwenden Sie feste Schlüssel wie summary und details. Lesen Sie beim Absenden beide Instanzen, unabhängig vom letzten Fokus. Ein echter Endpunkt muss den Datensatz autorisieren und jedes HTML-Feld prüfen und bereinigen. Bei Fehlern bleiben beide Entwürfe erhalten. Entscheiden Sie, ob die Felder atomar gespeichert werden müssen.

Autosave und Zurücksetzen abstimmen

Nutzen Sie getrennte Speicherschlüssel oder einen versionierten Datensatz für beide Felder. Ein gemeinsamer Local-Storage-Schlüssel kann Entwürfe überschreiben. Ein Browser-Reset widerruft keine Server-Schreibvorgänge, löscht keine Uploads und bietet keine Sicherung. Legen Sie zuerst Warteschlange und Versionsprüfung fest.

Abnahmecheckliste

Bearbeiten Sie beide Felder und wechseln Sie vor der Prüfung den Fokus. Stellen Sie eines wieder her und vergleichen Sie das andere HTML unverändert. Brechen Sie den vollständigen Reset ab. Testen Sie langes JSON, Emoji, Tastatur und 320px. Viele volle Werkzeugleisten benötigen Speicher und Platz: messen Sie das reale Formular vor der Initialisierung vieler Instanzen.

Weiterlesen