Rich Text in Klartext umwandeln und als TXT mit JavaScript herunterladen

RichTextEditor

Aktuellen Editortext als UTF-8-TXT mit sicherer Vorschau und Schutz vor veralteten Dateien exportieren.

Text und HTML bewusst unterscheiden

getPlainText() liefert extrahierten Text, getHTMLCode() liefert Markup. Reguläre Ausdrücke können beim Entfernen von Tags Wörter verbinden oder Entitäten stehen lassen. Text verliert Formatierung. Er eignet sich als Lesekopie, Indexeingabe oder Supportprotokoll, ist aber keine Sicherung des formatierten Dokuments.

Vollständiges Download-Beispiel ausführen

Stellen Sie die Editordateien über die App bereit. Vorbereiten liest den aktuellen Text, normalisiert CRLF und CR zu LF und erstellt einen UTF-8-Blob mit text/plain ohne zusätzliches BOM. Ein Link lädt document.txt herunter. textContent verhindert, dass die Vorschau HTML darstellt. Änderungen entfernen den veralteten Link. Es erfolgt keine Serveranfrage.

<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,a{box-sizing:border-box;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px}a[hidden]{display:none}pre{white-space:pre-wrap;overflow-wrap:anywhere}.editor-scroll{max-width:100%;overflow-x:auto}</style>
<h1>Export rich text as a UTF-8 text file</h1>
<div class="editor-scroll"><div id="editor"></div></div>
<button type="button" id="prepare">Prepare text file</button>
<a id="download" download="document.txt" hidden>Download .txt</a>
<p id="status" role="status" aria-live="polite"></p>
<pre id="preview"></pre>
<script>
const editor = new RichTextEditor("#editor", { toolbar: "full", height: "320px" });
editor.setHTMLCode("<h2>Project notes</h2><p>Keep the words, including <strong>formatting</strong>, 中文 and 👋.</p>");
const link = document.getElementById("download");
const preview = document.getElementById("preview");
const status = document.getElementById("status");
let currentURL = null, preparedHTML = null;
function clearPreparedFile() {
  if (currentURL) {
    const obsoleteURL = currentURL;
    // Do not revoke synchronously: a download may still be starting.
    setTimeout(() => URL.revokeObjectURL(obsoleteURL), 30000);
    currentURL = null;
  }
  preparedHTML = null;
  link.removeAttribute("href");
  link.hidden = true;
  preview.textContent = "";
}
function prepare() {
  clearPreparedFile();
  // Export the API result, not the HTML source or a regex-stripped version.
  const text = editor.getPlainText().replace(/\r\n?/g, "\n");
  preparedHTML = editor.getHTMLCode();
  const file = new Blob([text], { type: "text/plain;charset=utf-8" });
  currentURL = URL.createObjectURL(file);
  link.href = currentURL;
  link.hidden = false;
  preview.textContent = text;
  status.textContent = "Text file ready: " + file.size + " UTF-8 bytes. Click Download .txt. Nothing sent to a server.";
}
document.getElementById("prepare").addEventListener("click", prepare);
editor.attachEvent("change", () => {
  // Delayed notifications for the same saved HTML do not invalidate this snapshot.
  if (preparedHTML !== null && editor.getHTMLCode() === preparedHTML) return;
  clearPreparedFile();
  status.textContent = "Content changed. Prepare a new file before downloading.";
});
window.textDemo = { editor, prepare };
</script>

Informationsverlust beachten

Absätze, Listenzeichen, Tabellentrenner, Bildalternativen und Links hängen von der Extraktionsrichtlinie ab. Testen Sie echte Dokumente und versprechen Sie keine Gleichheit mit Markdown oder Word. TXT erhält weder Bilder, Gestaltung, Kommentare, Änderungsverlauf noch HTML für spätere Bearbeitung. Sichern Sie bei Bedarf das Original-HTML getrennt. Auch ein leerer Editor kann Zeilenumbrüche liefern. Das Beispiel entfernt keinen extrahierten Leerraum; Fokuswechsel können abschließende Leerzeilen beeinflussen.

Dateilebensdauer und Download verwalten

Eine Objekt-URL hält den Blob im Speicher. Das Beispiel gibt veraltete URLs nach 30 Sekunden frei, nicht direkt beim Anklicken. Verbleibende URLs werden beim Verlassen der Seite freigegeben. Die Frist ist kein allgemeines Signal für abgeschlossene Downloads. Testen Sie wiederholte Downloads, große Dateien und Zielgeräte. Das download-Attribut schlägt nur einen Namen vor; der Browser bestimmt die Speicherung. Wiederholte Downloads können eine Browserfreigabe erfordern. Umgehen Sie keine Browserrichtlinien und starten Sie keine unerwünschten Stapeldownloads.

Abnahmecheckliste

Exportieren Sie Emoji, kombinierte Akzente, Chinesisch, Japanisch, Absätze und Tabellen. Vergleichen Sie die Bytes mit normalisiertem getPlainText(), nicht mit HTML. Testen Sie leere Dokumente und tagähnlichen Text. Änderungen müssen den alten Link ausblenden. TXT ersetzt weder CSV-Escaping, HTML-Bereinigung noch serverseitige Prüfung.

Weiterlesen