Eine Markdown-Schreib-App mit lokalen Entwürfen und Downloads erstellen

RichMarkdown, eine lauffähige Schreibanwendung auf Basis von RichTextEditor

Erstellen Sie eine Browser-App, in der sich Texte visuell bearbeiten, lokale Markdown-Entwürfe speichern und .md-Dateien herunterladen lassen. Dieser Ablauf eignet sich für Dokumentationsentwürfe, README-Dateien oder persönliche Notizen.

Ein vollständiges, lauffähiges Beispiel finden Sie unter RichMarkdown. Die App verwendet RichTextEditor und ergänzt lokale Notizen, Rechercheausschnitte und Exportoptionen. Das Produkt ist kostenlos nutzbar; die Lizenzierung des Editors für Ihre eigene App ist eine separate Entscheidung.

Mit einem funktionierenden Editor beginnen

Laden Sie den Editor herunter und stellen Sie seinen Ordner richtexteditor über Ihre Website bereit. Führen Sie die Seite über einen lokalen Webserver aus, statt eine file:-URL zu öffnen. Laden Sie den Kern und die Plugins, bevor Sie eine Instanz erstellen. Die Schnellstartanleitung beschreibt die Einrichtung für die einzelnen Frameworks.

Entwurfsspeicherung und Download hinzufügen

Die vollständige Seite unten erstellt einen Editor namens editor, eine Schaltfläche mit id="download" und ein Statuselement mit id="save-status". Verwenden Sie für jedes Dokument einen eigenen stabilen Schlüssel.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"></div>
<button id="download" type="button">Download .md</button>
<p id="save-status" role="status"></p>
<script>
const editor = new RichTextEditor("#editor");
const status = document.getElementById("save-status");
const key = "my-markdown-draft";
let saved = "";
try { saved = localStorage.getItem(key) || ""; }
catch { status.textContent = "Browser storage is unavailable. Download a copy."; }
editor.fromMarkdown(saved || "# Untitled\n\nStart writing.");

function saveDraft() {
  try {
    localStorage.setItem(key, editor.toMarkdown());
    status.textContent = "Saved in this browser.";
  } catch {
    status.textContent = "Draft could not be saved. Download a copy.";
  }
}
let timer;
editor.attachEvent("change", function () {
  clearTimeout(timer);
  timer = setTimeout(saveDraft, 300);
});
window.addEventListener("pagehide", saveDraft);

document.getElementById("download").addEventListener("click", function () {
  const blob = new Blob([editor.toMarkdown()], {
    type: "text/markdown;charset=utf-8"
  });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "document.md";
  document.body.appendChild(link);
  link.click();
  link.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
});
</script>

Festlegen, was Markdown erhalten muss

Testen Sie echte Dokumente, bevor Sie Markdown als einziges Speicherformat wählen. Überschriften, Listen, Links, Zitate und eingezäunte Codeblöcke lassen sich in Markdown darstellen. Verbundene Tabellenzellen, Kommentare und beliebige Schriftformatierungen lassen sich nicht sauber in einfaches Markdown übertragen. Speichern Sie zusätzlich HTML oder strukturiertes JSON, wenn diese Details wichtig sind.

Die Sprachangabe eines Codeblocks beschreibt dessen Inhalt; sie führt Code weder aus, noch kompiliert oder validiert sie ihn. Belassen Sie Beispiele für JavaScript, TypeScript, PHP und C# als Text im Dokument.

Lokale Entwürfe bieten zusätzlichen Komfort

  • localStorage ist an diesen Browser und diesen Ursprung gebunden. Es bietet weder eine Datensicherung noch verschlüsselte Speicherung oder eine Synchronisierung zwischen Geräten.
  • Beim Löschen der Websitedaten gehen die Entwürfe verloren. Bieten Sie einen Download an und erläutern Sie diesen Zusammenhang in der Nähe des Editors.
  • Verwenden Sie für mehrere Dokumente separate Schlüssel und eine Dokumentliste. Größere Sammlungen benötigen möglicherweise IndexedDB.
  • Verwenden Sie für Teams einen Serverspeicher mit Authentifizierung und lösen Sie Bearbeitungskonflikte auf. Ein gemeinsamer lokaler Schlüssel ermöglicht keine Zusammenarbeit.

Vor der Verarbeitung von Kundendokumenten

Prüfen Sie die Berechtigung für jeden serverseitigen Lese- und Schreibzugriff. Behandeln Sie eingereichtes Markdown als nicht vertrauenswürdige Eingabe. Wenn ein Server daraus HTML erzeugt, verwenden Sie einen Markdown-Renderer und eine HTML-Bereinigungsrichtlinie, die zum Anzeigeort dieses HTML passen. Eine Browservorschau ersetzt keine serverseitige Validierung.

Speichern Sie Bilddateien separat und halten Sie beständige URLs fest. Eine Markdown-Datei enthält die referenzierten Bilder nicht automatisch. Weitere Informationen finden Sie unter Rich Text mit Bildern speichern.

Den Ablauf prüfen

  1. Geben Sie eine Überschrift und eine Liste ein und warten Sie auf die Speichermeldung.
  2. Laden Sie die Seite neu und prüfen Sie, ob der Entwurf wiederhergestellt wird.
  3. Fügen Sie einen Codeblock hinzu, laden Sie die Datei herunter und öffnen Sie sie in einem Markdown-Reader.
  4. Prüfen Sie Sprachangabe, Einrückung, Links und Bilder.
  5. Deaktivieren Sie den Browserspeicher; der Download sollte weiterhin verfügbar sein.

Lesen Sie anschließend Word und Google Docs in Markdown umwandeln, die interaktive Markdown-Demo und die Anleitung zur Validierung erforderlicher Inhalte.

Weiterlesen