JPKCom DB

Markdown Editor — Manual

Funktionsreferenz des Markdown-Editors: File-Menü, jede Schaltfläche, GFM und Erweiterungen, Tabellen-Dialog, Snapshots, Export, Architektur und Tastaturkürzel.

Zurück zur Übersicht: Markdown Editor · Tool live öffnen: www.jpkc.com/tools/md/

Dieses Manual beschreibt den Markdown Editor vollständig: jede Schaltfläche der Werkzeugleiste, die unterstützte Markdown-Syntax in voller Breite, wie der Editor speichert, wie der Export funktioniert und welche Grenzen gelten. Die Oberfläche des Tools ist auf Englisch — die Button- und Menü-Bezeichnungen werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Aufbau der Oberfläche

Der Editor besteht aus drei Bereichen:

  1. Die zweizeilige Werkzeugleiste ganz oben — Zeile 1 mit dem File-Menü (Dokument, Vorlagen, Speichern und Export) sowie Ansichts- und Werkzeug-Aktionen, Zeile 2 mit den eigentlichen Markdown-Formatierungen.
  2. Die Editor-Spalte (links, Überschrift „Markdown") — hier tippst du. Rechts in ihrer Kopfzeile zeigt ein kleines Badge den localStorage-Status: grün, wenn der aktuelle Stand gesichert ist, rot, wenn das Speichern fehlschlägt. Unter dem Editor steht eine Statuszeile mit Größe in Bytes, Wörtern, Zeilen und geschätzter Lesezeit (200 Wörter pro Minute, mindestens eine Minute) sowie der Cursorposition (Ln, Col).
  3. Die Vorschau-Spalte (rechts, Überschrift „Preview") — das gerenderte Ergebnis, umschaltbar zwischen den Lesethemen Dark, Light und Sepia.

Beide Spalten scrollen standardmäßig synchron. Unterhalb von 992 px Breite (Smartphone, Tablet hochkant) stehen die Spalten nicht mehr nebeneinander: Über die Tabs Markdown und Preview schaltest du zwischen Editor und Vorschau um; die für den Desktop gewählte Ansicht bleibt dabei gespeichert. Auf schmalen Bildschirmen blenden sich außerdem die Zwischenablage-Buttons (unter 768 px) und der Vollbild-Button (unter 576 px) aus.

Die Werkzeugleiste ist auch per Tastatur bedienbar: Sie ist ein Tab-Stopp, innerhalb wanderst du mit den Pfeiltasten, Pos1 und Ende. Auf Touch-Geräten mit schmalem Bildschirm wird jede Zeile zu einem seitlich wischbaren Streifen; Pfeile ‹ › am Rand zeigen, dass dort weitere Buttons liegen. Mit Maus oder Trackpad brechen die Zeilen stattdessen um.

GitHub Flavored Markdown und Erweiterungen

Gerendert wird mit markdown-it (Version 15), konfiguriert mit eingeschaltetem linkify (nackte URLs und sogar Domains ohne Protokoll wie example.com werden zu Links), breaks (ein einfacher Zeilenumbruch wird zum <br>), typographer (typografische Ersetzungen) und html (eingebettetes HTML wird gerendert). Darauf sitzt eine ganze Reihe Plugins. Der unterstützte Umfang:

GFM-Kern

  • Überschriften # bis ######
  • Fett **text**, kursiv *text*, durchgestrichen ~~text~~
  • Inline-Code `code` und Code-Blöcke mit drei Backticks und optionaler Sprachangabe — mit einer Sprache, die highlight.js kennt (z. B. javascript, php, bash), wird der Block farbig hervorgehoben; ohne Sprachangabe bleibt er in der Live-Vorschau ungefärbt, in der Vollbild-Vorschau und in den Exporten errät highlight.js die Sprache automatisch und färbt ihn ein
  • Listen — ungeordnet (-), geordnet (1.) und Task-Listen (- [x] / - [ ])
  • Tabellen im Pipe-Format | A | B |
  • Blockzitate > …, horizontale Linien ---
  • Links [text](url), Bilder ![alt](url) und automatisch verlinkte nackte URLs

Erweiterungen über GFM hinaus

  • Fußnoten — Text[^1] mit [^1]: Notentext
  • Definitionslisten — eine Zeile Begriff, darunter : Definition
  • Tiefstellung ~text~ (z. B. H~2~O) und Hochstellung ^text^ (z. B. x^2^)
  • Markierung ==text== (<mark>) und Einfügung ++text++ (<ins>)
  • Abkürzungen — *[HTML]: Hyper Text Markup Language erzeugt ein <abbr> mit Tooltip
  • Emoji-Shortcodes — :smile:, :heart:, :rocket: …
  • Mathematik mit KaTeX — inline $E = mc^2$, als Block $$\sum_{i=1}^{n} x_i$$ (Dollar-Delimiter)
  • Mermaid-Diagramme — ein Code-Block mit Sprache mermaid wird als Diagramm gerendert (Flowchart, Sequenz, Klasse, State, ER, Gantt, Pie)
  • Typographer — gerade Anführungszeichen werden zu typografischen, -- zu Halbgeviert-, --- zu Geviertstrich, ... zur Ellipse
  • Front Matter — beginnt das Dokument in Zeile 1 mit --- (YAML) oder +++ (TOML) und wird derselbe Marker später wieder geschlossen, zeigt die Vorschau diesen Block als abgesetzten Codeblock mit einer Trennlinie darunter, statt ihn als Text und Linie zu interpretieren
  • Roh-HTML — eingebettete HTML-Tags werden in der Vorschau gerendert; vorher filtert der Sanitizer DOMPurify alles Ausführbare heraus (siehe Grenzen)

Das eingebaute Markdown Cheat Sheet (im Tools-Menü ⋮) listet diese Syntax kompakt mit Beispielen.

Werkzeugleiste, Zeile 1 — Datei und Ansicht

File-Menü — Dokument, Vorlagen, Speichern und Export

Der blaue File-Button ganz links bündelt alles, was ein ganzes Dokument betrifft, in drei Abschnitten.

Document:

  • New document — ersetzt den Inhalt durch den Willkommenstext des Editors, ein Beispieldokument, das die unterstützte Syntax vorführt. Für eine wirklich leere Seite nimmst du Clear document.
  • Open file… (Strg+O) — öffnet eine lokale Datei (.md, .markdown, .txt) per Dateidialog. Textdateien kannst du auch einfach auf die Editor-Spalte ziehen (siehe Bilder und Dateien).
  • Load from URL… — öffnet den Dialog „Load Markdown from URL", in den du eine Adresse einträgst und mit Fetch Content (oder Enter) bestätigst; der Inhalt wird serverseitig geholt und ersetzt den aktuellen Editor-Inhalt. Mechanik und Grenzen siehe Architektur.
  • Snapshots… — gespeicherte Versionen des Dokuments verwalten (siehe Snapshots).
  • Tidy up Markdown — räumt den Quelltext auf, ohne das Ergebnis zu verändern (siehe Tidy up Markdown).
  • Clear document — leert den Editor.

Bevor New document, Clear document, eine Vorlage oder eine per Drag & Drop abgelegte Datei echten Inhalt ersetzt, fragt der Editor nach (bei New, Clear und abgelegten Dateien „… will replace the current document. Continue?", bei Vorlagen „Replace current content with template?"). Bei leerem Editor oder unverändertem Willkommenstext entfällt die Frage. Zusätzlich legt der Editor vor dem Ersetzen automatisch einen Snapshot des bisherigen Inhalts an, und Strg+Z macht das Ersetzen rückgängig.

New from template: sechs Vorlagen, siehe den nächsten Abschnitt.

Save & export:

  • Save as Markdown (Strg+S) — speichert den Editor-Inhalt als .md-Datei.
  • Save as HTML, Save as PDF — eigenständige HTML-Datei bzw. PDF.
  • Copy as formatted text — kopiert das gerenderte Ergebnis so, dass es formatiert in Mail-Programme, Word oder Google Docs eingefügt wird.
  • Copy as HTML — kopiert ein vollständiges HTML-Dokument in die Zwischenablage.
  • Print preview… — druckt die gerenderte Vorschau.
  • Print Markdown source… — druckt den rohen Markdown-Quelltext.

Der Dateiname ergibt sich aus der ersten Überschrift des Dokuments (aus „Meine Notizen" wird meine-notizen.md); ohne Überschrift dient die erste Textzeile, sonst document. Details zu allen Exporten unter Export und Druck.

Templates — Dokumentvorlagen

Im File-Menü unter New from template stehen sechs fertige Grundgerüste, die den Editor füllen: README.md, Changelog, Blog Post (mit YAML-Front-Matter für Titel, Datum, Autor, Tags und Beschreibung), Meeting Notes, API Documentation und License (MIT). Gut als Startpunkt, statt mit einer leeren Seite zu beginnen. Steht schon eigener Text im Editor, fragt das Tool vorher nach („Replace current content with template?").

Clipboard — Cut / Copy / Paste

Ausschneiden, Kopieren und Einfügen (nur auf größeren Bildschirmen sichtbar) — die üblichen Zwischenablage-Aktionen auf den Editor-Inhalt.

Undo / Redo

Rückgängig (Strg+Z) und Wiederholen (Strg+Y) über die volle ACE-Historie.

Font size — Schriftgröße

Zwei Schaltflächen verkleinern und vergrößern die Schrift in Editor und Vorschau um je 1 px, im Bereich von 8 bis 32 px (auch in den Settings als Zahlenwert einstellbar).

View options — Ansicht

  • Editor + Preview — geteilte Ansicht (Standard).
  • Editor only — nur der Editor.
  • Preview only — nur die Vorschau.
  • Table of Contents — blendet links ein Inhaltsverzeichnis-Panel ein (siehe Inhaltsverzeichnis und synchrones Scrollen).
  • Toggle line wrap — schaltet den Zeilenumbruch im Editor um.
  • Toggle synchronized scrolling — schaltet das synchrone Scrollen von Editor und Vorschau ein/aus (Standard: ein).
  • Toggle fullscreen — Vollbildmodus (mit Escape verlassen). Auf schmalen Bildschirmen bleiben die Tabs Markdown/Preview dabei unter der Werkzeugleiste erreichbar.

Ansicht, Zeilenumbruch und Scroll-Synchronisation merkt sich der Editor über einen Reload hinweg.

Tools-Menü (⋮)

  • Go to Line (Ctrl+G) — öffnet einen kleinen Dialog, der die gültige Zeilenspanne anzeigt; Go springt zur eingegebenen Zeile.
  • Find (Ctrl+F), Replace (Ctrl+H) — öffnen die Suchleiste des ACE-Editors.
  • Markdown Cheat Sheet — das eingebaute Syntax-Nachschlagewerk.
  • Keyboard Shortcuts — eine Übersicht wichtiger Tastaturkürzel.
  • Settings — die Editor-Einstellungen (siehe Einstellungen).

Preview (Fullscreen)

Der Button Preview öffnet die gerenderte Vorschau bildschirmfüllend in einem Modal, im gerade gewählten Lesethema. Die Kopfzeile hat eigene Buttons: Copy (wie Copy as HTML), Save (wie Save as HTML), PDF und Print. Alle übrigen Export-Funktionen liegen im File-Menü; Details unter Export und Druck.

Werkzeugleiste, Zeile 2 — Markdown-Formatierung

Text formatting

  • Headings — Menü für Überschrift 1 bis 6.
  • Bold (**text**), Italic (*text*), Strikethrough (~~text~~).
  • Subscript (~text~), Superscript (^text^).
  • Highlight (==text==), Inserted (++text++).
  • Inline code (`code`).

Die Formatierungen schalten um: Ist der markierte Text schon fett (die Sternchen stehen direkt außerhalb oder innerhalb der Auswahl), entfernt ein zweiter Klick auf Bold die Marker wieder. Der Text bleibt danach markiert, sodass du direkt weiterformatieren kannst. Ohne Auswahl fügt der Button einen markierten Platzhalter ein (etwa bold text), den du einfach überschreibst.

Überschriften wirken zeilenweise auf alle Zeilen der Auswahl: Eine andere Ebene ersetzt die vorhandene (aus ## Titel wird mit Heading 3 ### Titel, nicht ### ## Titel), dieselbe Ebene entfernt sie.

Block elements

  • Lists — Menü für Unordered List, Ordered List, Task List und Definition List. Die Listentypen wirken wie die Überschriften auf alle markierten Zeilen: Ein anderer Typ ersetzt den vorhandenen Listenmarker, derselbe Typ entfernt ihn; geordnete Listen werden fortlaufend nummeriert. Definition List fügt ein Gerüst Term / : Definition ein.
  • Blockquote (> quote) — setzt oder entfernt > vor allen markierten Zeilen.
  • Code block — setzt die Auswahl in einen Code-Block mit drei Backticks auf eigenen Zeilen; ohne Auswahl ist der Platzhalter code markiert, die Sprache ergänzt du direkt hinter den öffnenden Backticks.
  • Insert table — öffnet den Tabellen-Dialog (siehe Tabellen).
  • Horizontal rule (---).
  • Insert Mermaid diagram — fügt ein Mermaid-Grundgerüst (graph TD mit zwei Knoten) ein.

References & extras

  • Insert link, Insert image — mit markiertem Text entsteht [Text](url) bzw. ![Text](url), und url ist gleich markiert, sodass du die Adresse direkt tippst. Ohne Auswahl wird [link text](url) bzw. ![alt text](image-url) eingefügt, mit markiertem Linktext bzw. Alt-Text.
  • Footnote — fügt einen Verweis [^1] und darunter die Definition [^1]: Footnote text here. ein.
  • Emoji — öffnet einen Emoji-Picker mit Suchfeld („Search emojis…"). Ein Klick auf ein Emoji fügt dessen Shortcode ein, etwa :rocket:, nicht das Zeichen selbst; so bleibt dein Markdown portabel. Der Picker zeigt höchstens 160 Emojis auf einmal, alle übrigen findest du über das Suchfeld. Achtung: Jeder Klick auf den Emoji-Button selbst, auch der zum Schließen des Pickers, fügt zusätzlich :smile: an der Cursorposition ein. Alternativ tippst du im Editor einen Doppelpunkt und ein paar Buchstaben (:thu): Eine Vorschlagsliste klappt auf mit bis zu 20 Emojis, deren Name die getippten Zeichen enthält, etwa :thumbsup:.
  • Abbreviation — fügt eine Definitionszeile *[ABBR]: Full text here ein.
  • Math (KaTeX) — Menü für Math Inline ($…$ um die Auswahl bzw. den Platzhalter E = mc^2) und Math Block ($$…$$ auf eigenen Zeilen).

Inhaltsverzeichnis und synchrones Scrollen

Table of Contents öffnet links ein Panel mit allen Überschriften des Dokuments, eingerückt nach Ebene. Neben jeder Überschrift steht die Zahl der Wörter in ihrem Abschnitt bis zur nächsten Überschrift — praktisch, um die Länge von Kapiteln abzuschätzen. Das Verzeichnis entsteht aus dem Parser-Ergebnis von markdown-it: Zeilen mit # innerhalb von Code-Blöcken erscheinen nicht, Setext-Überschriften (Text mit === oder --- darunter) schon. Ein Klick auf einen Eintrag setzt die Überschrift an den oberen Rand des Editors, die Vorschau folgt. Während du tippst, aktualisiert sich das Panel.

Das synchrone Scrollen wirkt in beide Richtungen: Scrollst du im Editor, folgt die Vorschau, und umgekehrt. Wie die beiden Bereiche aufeinander abgebildet werden, legst du in den Einstellungen fest:

  • Line-accurate (Standard) — richtet sich nach den Quellzeilen der gerenderten Blöcke. Die Vorschau zeigt damit genau den Absatz, die Überschrift, das Bild oder das Diagramm, an dem du im Editor gerade bist. Über hohen Bildern und Diagrammen, die im Quelltext nur eine Zeile belegen, bewegt sich die Vorschau dafür kurz schneller.
  • Proportional (classic, evenly paced) — bildet die Scroll-Position prozentual ab. Das läuft gleichmäßig, kann in Dokumenten mit vielen Bildern oder Diagrammen aber deutlich danebenliegen.

Tabellen: Dialog, CSV und Einfügen aus Excel

Insert table öffnet den Dialog „Insert table":

  • Columns (1–20, Standard 3) und Body rows (1–100, Standard 2) — erzeugen eine leere Tabelle mit den Kopfzellen Column 1, Column 2 …
  • Alignment — Default, Left, Center oder Right für alle Spalten (über Doppelpunkte in der Trennzeile).
  • …or paste data — hier fügst du stattdessen Daten ein: CSV, durch Semikolon oder durch Tabulator getrennt, etwa direkt aus Excel kopiert. Die erste Zeile wird zur Kopfzeile. Das Trennzeichen erkennt der Dialog an der ersten Zeile; Werte in Anführungszeichen dürfen Trennzeichen, Zeilenumbrüche und verdoppelte Anführungszeichen ("") enthalten. Pipe-Zeichen in Zellen werden als \| maskiert, Zeilenumbrüche zu <br>.
  • Preview — zeigt das fertige Markdown, das beim Klick auf Insert an der Cursorposition landet, mit Leerzeilen davor und danach.

Die Spalten sind im Quelltext bereits bündig ausgerichtet.

Noch direkter geht es beim Einfügen: Kopierst du einen Zellbereich aus Excel, LibreOffice oder Google Sheets (mindestens zwei Zeilen und zwei Spalten) und fügst ihn mit Strg+V in den Editor ein, wird daraus automatisch eine ausgerichtete Markdown-Tabelle. Ein Strg+Z entfernt die eingefügte Tabelle wieder; die rohen, tabulatorgetrennten Zellen bekommst du so nicht zurück. Innerhalb eines Code-Blocks bleibt eingefügter Text unverändert.

Bilder und Dateien per Drag & Drop oder Zwischenablage

  • Bild auf die Editor-Spalte ziehen — das Bild wird als Data-URI (Base64) an der Cursorposition eingebettet, als ![dateiname.png](data:image/png;base64,…).
  • Bild aus der Zwischenablage einfügen (etwa ein Screenshot) — landet ebenso eingebettet, als ![pasted image](data:…). Ab 500 KB warnt das Tool, weil der Browser-Speicher für die automatische Sicherung nur etwa 5 MB fasst.
  • Textdatei auf die Editor-Spalte ziehen — Markdown- oder Textdateien (.md, .markdown, .mdown, .mkd, .mkdn, .txt, .text oder ein text/*-Dateityp) ersetzen nach Rückfrage das Dokument. Andere Dateien (PDF, ZIP …) lehnt der Editor mit einer Fehlermeldung ab.

Eingebettete Bilder machen das Dokument eigenständig, blähen es aber auf: Als Base64-Text ist ein Bild größer als die Originaldatei, und es steckt komplett im Quelltext und in der automatischen Sicherung. Für größere Bilder ist ein Link auf eine gehostete Datei die bessere Wahl.

Snapshots

Snapshots sind benannte Versionen deines Dokuments, gespeichert im localStorage dieses Browsers. Du öffnest sie über File → Snapshots…:

  • Save current document — speichert den aktuellen Stand; der Name im Feld davor ist optional (bis 80 Zeichen), ohne Namen nimmt das Tool den Dokumenttitel (die erste Überschrift, sonst die erste Zeile, sonst „Untitled").
  • Die Liste zeigt je Snapshot Name, Datum, Größe und den Vermerk „automatic" für automatisch angelegte. Restore stellt einen Snapshot wieder her, der Papierkorb löscht ihn.

Automatisch legt der Editor einen Snapshot an, bevor ein Dokument ersetzt wird: bei New document, einer Vorlage, Open file…, einer abgelegten Datei, Load from URL…, Clear document und auch vor Restore. Solche Snapshots heißen etwa „Projekt X — before clearing". Ist der Inhalt identisch mit dem jüngsten Snapshot, entsteht kein weiterer automatischer; für einen leeren Editor oder den unveränderten Willkommenstext entsteht gar keiner.

Es werden höchstens 20 Snapshots aufbewahrt. Kommt ein neuer hinzu oder ist der Speicher voll, fallen zuerst die ältesten automatischen weg, erst danach die ältesten manuellen.

Tidy up Markdown

File → Tidy up Markdown räumt den Quelltext auf, ohne zu verändern, was gerendert wird:

  • Tabellen werden bündig ausgerichtet; die Ausrichtung aus der Trennzeile (:--, :-:, --:) bleibt erhalten.
  • Leerzeichen am Zeilenende werden entfernt — außer bei einem harten Zeilenumbruch (zwei oder mehr Leerzeichen vor einer Folgezeile), der auf genau zwei Leerzeichen normalisiert wird.
  • Mehrere Leerzeilen hintereinander werden zu einer zusammengefasst; am Dateiende steht genau ein Zeilenumbruch.
  • Der Inhalt von Code-Blöcken mit Backticks oder Tilden und das Front Matter bleiben unangetastet. In eingerücktem Code (vier Leerzeichen oder Tab) bleiben Leerzeilen erhalten, Leerzeichen am Zeilenende werden aber auch dort entfernt.

Die Änderung ist ein einziger Undo-Schritt. Eine Meldung nennt die Zahl der ausgerichteten Tabellen; ist nichts zu tun, meldet das Tool „Already tidy — nothing to change."

Architektur, Speicherung und Datenschutz

Der Editor ist im Kern eine reine Client-Anwendung: Rendern, automatisches Speichern und Export passieren ausschließlich in deinem Browser. Dein Dokument verlässt deinen Rechner nicht — es sei denn, du speicherst oder exportierst es bewusst als Datei.

Automatisches Speichern legt den aktuellen Inhalt eine Sekunde nach deiner letzten Änderung unter dem Schlüssel md_editor_content im localStorage deines Browsers ab; die Editor-Einstellungen (inklusive Ansicht, Lesethema und Scroll-Modus) liegen unter md_editor_settings, die Snapshots unter md_editor_snapshots. Alles bleibt zwischen Sitzungen erhalten und ist nach einem Reload wieder da; beim Start meldet das Tool „Content restored from local storage." Das Status-Badge in der Editor-Kopfzeile zeigt grün, wenn der Stand gesichert wurde. Ist der Speicher voll (typisch nach mehreren eingebetteten Bildern) oder gesperrt, wird es rot, und eine einmalige Meldung weist darauf hin, dass das Dokument nicht mehr automatisch gesichert wird — dann hilft nur Save as Markdown.

Die einzige Funktion, die etwas von dir an den Server schickt, ist Load from URL…. (Daneben lädt der Editor die statische Emoji-Liste emoji-data.json vom JPKCom-Server nach, sobald du den Emoji-Picker öffnest oder beim Tippen bzw. Einfügen direkt vor dem Cursor ein Doppelpunkt gefolgt von mindestens einem Kleinbuchstaben, einer Ziffer oder _, +, - steht. Das kann auch eine Uhrzeit wie 12:30 sein. Picker und Autovervollständigung laden die Liste unabhängig voneinander; dabei geht nichts von dir mit.) Der Ablauf:

  1. Das Tool-JavaScript holt zunächst über einen internen Token-Endpunkt (p-api.php) ein frisches, zeitlich begrenztes Token-Paar.
  2. Damit ruft es den Fetch-Proxy (p.php) auf, der die von dir angegebene URL serverseitig per cURL lädt und den rohen Inhalt (typisch text/markdown oder text/plain) zurückgibt.

Diese beiden Endpunkte sind kein öffentliches API, das du selbst aufrufen kannst — sie sind durch Token, Referer-Prüfung und tagesrotierende Geheimnisse gegen Fremdnutzung gehärtet und werden ausschließlich vom Tool selbst verwendet. Datenschutz-relevant ist vor allem: An den Server geht beim URL-Laden nur die Ziel-URL, niemals der Text, den du im Editor schreibst. Die Zielseite sieht einen Request vom JPKCom-Server, nicht deine IP-Adresse. Es gelten serverseitige Grenzen:

  • SSRF-Schutz: nur HTTP/HTTPS; private, lokale, interne und andere nicht öffentliche IP-Bereiche werden blockiert, auch über Umwege wie NAT64- oder 6to4-Adressen. Erlaubt sind nur die Ports 80, 443, 3000, 5000, 8000, 8008, 8080 und 8443.
  • Größenlimit: maximal 950 KB Antwort-Body; größere Antworten bricht der Proxy ab („The file is too large.").
  • Timeout: 10 s je Abruf bzw. je Weiterleitung (davon höchstens 5 s für den Verbindungsaufbau), höchstens 30 s für die ganze Kette mit bis zu 5 Weiterleitungen.
  • Rate-Limit: höchstens 120 Abrufe pro Minute und IP-Adresse; darüber meldet das Tool „Too many requests …".

Meldet der Proxy einen Fehler (ungültige oder interne Adresse, abgelaufenes Token, zu große oder leere Antwort, Rate-Limit), erscheint der Text als Fehlermeldung, und dein Dokument bleibt unverändert. Antwortet dagegen der Zielserver mit einer Fehlerseite (etwa „404: Not Found" oder einer HTML-Fehlerseite), reicht der Proxy deren Text durch, und er ersetzt dein Dokument wie jeder andere Inhalt. Kommt Inhalt an, legt der Editor vor dem Ersetzen automatisch einen Snapshot an; Strg+Z holt den vorherigen Stand ebenfalls zurück.

Expert Mode (optional)

Ist der optionale LocalProxy (Expert Mode) aktiv, läuft das URL-Laden stattdessen über einen selbst betriebenen lokalen Proxy auf http://127.0.0.1:<port> — dann geht die Ziel-URL gar nicht erst an den JPKCom-Server. Die Einrichtung ist fortgeschritten und für den normalen Betrieb nicht nötig.

Export und Druck

Alle Exporte liegen im File-Menü unter Save & export und entstehen lokal im Browser. Dafür rendert der Editor das Dokument neu, in hellem Design und unabhängig vom gewählten Lesethema:

  • Save as Markdown — der Quelltext als .md-Datei (UTF-8).
  • Save as HTML — speichert ein vollständiges, eigenständiges HTML-Dokument. Eingebettet sind die nötigen Stile: ein schlichtes Grundlayout, ein helles highlight.js-Theme für Code und das KaTeX-CSS. Den <title> liefert die erste Überschrift. Die KaTeX-Schriften bindet die Datei per absoluter URL vom JPKCom-Server ein, Bilder bleiben Verweise auf ihre Quelle (außer eingebetteten Data-URIs). Beim Drucken der Datei brechen lange Code-Zeilen um, statt abgeschnitten zu werden.
  • Save as PDF — rendert über html2pdf.js (html2canvas) eine PDF-Datei im Format A4 hochkant mit 10 mm Rand. Seitenumbrüche werden so gesetzt, dass Zeilen und Blöcke nicht mitten durchgeschnitten werden.
  • Copy as formatted text — legt das gerenderte Ergebnis als HTML und den Markdown-Quelltext als reinen Text in die Zwischenablage. Ein Mail-Programm, Word oder Google Docs übernimmt beim Einfügen die Formatierung, ein reines Textfeld den Markdown-Text. Unterstützt der Browser das nicht, verweist eine Meldung auf Copy as HTML.
  • Copy as HTML — kopiert dasselbe vollständige HTML-Dokument wie Save as HTML (mit <head> und Stilen) als Text in die Zwischenablage.
  • Print preview… — öffnet das HTML-Dokument in einem neuen Fenster und startet dort den Druckdialog.
  • Print Markdown source… — druckt den rohen Quelltext in Monospace-Schrift, mit Kopfzeile „Markdown Source" und Druckdatum.

Mermaid-Diagramme werden für HTML-Export, Kopieren, Drucken und PDF im hellen Thema neu gerendert, damit sie auf weißem Grund lesbar sind. Die internen Zeilenmarker der Vorschau (data-line) entfernt der Export. Bei leerem Editor brechen Speichern, PDF, Drucken und Copy as formatted text mit einer Meldung ab („Nothing to save.", „Nothing to export.", „Nothing to print.", „Nothing to copy."); Copy as HTML (auch der Copy-Button im Vollbild-Modal) kopiert dagegen ein HTML-Gerüst mit leerem <body>.

Einstellungen

Im Settings-Dialog stellst du den Editor ein; die Werte werden im localStorage gesichert:

  • Font Size — Schriftgröße von Editor und Vorschau in Pixeln (8–32, Standard 15).
  • Tab Size — 2, 4 (Standard) oder 8 Leerzeichen.
  • Theme — ACE-Editor-Theme: Dracula (Standard) oder Monokai (dunkel), GitHub oder Solarized (Sepia) (hell).
  • Synchronized scrolling — Line-accurate (follows headings, images, diagrams) (Standard) oder Proportional (classic, evenly paced); Unterschiede siehe Inhaltsverzeichnis und synchrones Scrollen.
  • Word wrap — Zeilenumbruch (Standard: an).
  • Show invisible characters — unsichtbare Zeichen anzeigen.
  • Show indent guides — Einrückungslinien (Standard: an).
  • Show line numbers — Zeilennummern (Standard: an).
  • Highlight active line — aktive Zeile hervorheben (Standard: an).
  • Reset to Defaults — alle Werte zurücksetzen.

Tastaturkürzel

Der Editor ergänzt die Standardbelegung von ACE um eigene Kürzel. Die folgenden Angaben gelten für Windows und Linux, so wie die Kürzel im Editor tatsächlich wirken; auf dem Mac nimmst du für die Datei- und Formatierungskürzel Cmd statt Strg, die übrigen ACE-Kürzel sind dort teils anders belegt.

  • Formatierung: Strg+B fett, Strg+I kursiv (beide schalten um).
  • Datei: Strg+S als Markdown speichern, Strg+O Datei öffnen.
  • Suche & Ersetzen: Strg+F Suchleiste, Strg+H Suchen und Ersetzen. In der Suchleiste springst du mit Strg+G zum nächsten und mit Strg+Shift+G zum vorherigen Treffer; außerhalb der Suchleiste machen das Strg+K und Strg+Shift+K.
  • Bearbeiten: Strg+Z rückgängig, Strg+Y (oder Strg+Shift+Z) wiederholen, Strg+D Zeile löschen, Strg+Shift+D Zeile bzw. Auswahl duplizieren, Alt+↑/↓ Zeile verschieben, Alt+Shift+↓ Zeile nach unten kopieren, Tab/Shift+Tab ein-/ausrücken.
  • Navigation: Strg+G Dialog „Go to line", Strg+Pos1/Strg+Ende an Anfang/Ende des Dokuments, Strg+←/→ wortweise, Alt+←/→ an Zeilenanfang/-ende.
  • Ansicht: Escape verlässt den Vollbildmodus.
  • Werkzeugleiste: Tab führt in die Leiste, dort wechseln ←/→, Pos1 und Ende zwischen den Buttons.

Der Keyboard Shortcuts-Dialog im Tools-Menü fasst eine Auswahl zusammen; einige Einträge dort (etwa Strg+D, F3 und Alt+←/→) weichen von der hier beschriebenen tatsächlichen Belegung ab.

Grenzen

  • Der Editor rendert nur, was markdown-it samt der geladenen Plugins kann — exotische Markdown-Dialekte oder GitHub-spezifische Features wie Alerts/Callouts sind nicht abgedeckt.
  • Wegen breaks: true wird jeder einfache Zeilenumbruch zum <br> — das weicht von striktem CommonMark/GFM ab (siehe Tipps & Tricks).
  • Wegen html: true wird eingebettetes HTML in der Vorschau gerendert. Vorschau und Export laufen aber durch den Sanitizer DOMPurify: <script>-Tags, Event-Handler wie onerror und andere ausführbare Bestandteile werden entfernt, auch bei Inhalten, die du per URL lädst. Was nach dem Filtern bleibt, ist reines Markup. Lädt DOMPurify nicht, zeigt die Vorschau eine Fehlermeldung statt ungefilterten HTMLs.
  • Load from URL… ist auf öffentliche HTTP/HTTPS-Adressen begrenzt (kein localhost/Intranet), maximal 950 KB, 10 s Timeout je Abruf (höchstens 30 s mit Weiterleitungen), 120 Abrufe pro Minute.
  • Die automatische Sicherung und die Snapshots liegen nur in diesem Browser; ein anderer Browser oder ein gelöschter localStorage kennt deinen Text nicht. Der Browser-Speicher fasst typischerweise nur einige MB — viele eingebettete Bilder füllen ihn schnell.

Für den Einstieg und die Zielgruppen siehe die Übersichtsseite. Konkrete Abläufe zeigen die Beispiele, strategische Kniffe die Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.