WYSIWYG Editor — Manual

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

Dieses Manual beschreibt den WYSIWYG Editor vollständig: das Datei-Menü und jede Toolbar-Funktion, die Dialoge und Bubble-Menüs, das Slash-Menü, die zugrunde liegenden TipTap-Extensions, alle Import- und Export-Formate, die Architektur und die technischen Grenzen. 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.

Grundkonzept

Der Editor ist eine einzige formatierte Schreibfläche (kein geteiltes Quelltext-Fenster). Du tippst Text, formatierst ihn über die Toolbar, das Slash-Menü oder Tastenkürzel, und der Editor pflegt darunter ein sauberes Dokumentmodell. Technisch ist es TipTap 3 (öffnet in neuem Tab) — ein headless Rich-Text-Framework auf Basis von ProseMirror — gebündelt zu einer fertigen Anwendung. Über der Schreibfläche liegt eine zweizeilige Toolbar, darunter eine Statusleiste mit Dokument-Kennzahlen; rechts oben zeigt ein Badge den Speicherstatus.

Beim ersten Tippen helfen Live-Markdown-Eingaberegeln (über das TipTap-StarterKit): # am Zeilenanfang macht eine Überschrift, - eine Aufzählung, 1. eine Nummerierung, > ein Zitat, ``` einen Code-Block, **fett** und *kursiv* setzen Marken. Der Platzhalter im leeren Editor weist darauf hin: „Start writing… type "/" for commands, "# " for a heading, "- " for a list".

Die Toolbar ist per Tastatur bedienbar: Sie ist ein Tab-Stopp, innerhalb wechselst du mit den Pfeiltasten, Pos1 und Ende zwischen den Buttons. Auf Touch-Geräten mit schmalem Display werden die beiden Toolbar-Reihen zu horizontalen Wischleisten mit Pfeilen ‹ › am Rand; mit Maus oder Trackpad brechen sie stattdessen um. Lange Menüs passen sich der verfügbaren Höhe an und scrollen selbst.

File (Datei-Menü)

Ganz links sitzt das File-Menü. Es bündelt alle Ein- und Ausgänge auf Dokumentebene in vier Gruppen:

Document

Open file (HTML / Markdown)… — öffnet eine lokale Datei und ersetzt den aktuellen Inhalt. Angenommen werden .html, .htm, .xhtml, .md, .markdown und .txt; Dateien mit .md, .markdown oder .txt liest der Editor als Markdown, alle anderen als HTML.
Load from URL… — öffnet den Dialog Insert HTML from URL: Du trägst eine absolute http(s)-Adresse ein, wählst Replace the current document (Standard) oder Insert at the cursor position und bestätigst mit Fetch Content. Das HTML der Seite wird über den serverseitigen Proxy abgerufen (siehe Architektur); relative Links und Bildpfade schreibt der Editor dabei in absolute URLs um. Fehlermeldungen des Proxys (etwa „zu groß" oder „Token abgelaufen") erscheinen als Hinweis, nicht als Text im Dokument.
Snapshots… — die Versionsablage im Browser, siehe Snapshots.
Edit HTML source… — der Quelltext-Editor, siehe HTML source.
Clear document — leert den Editor nach Rückfrage und löscht den automatisch gespeicherten Stand. Vorher legt der Editor einen automatischen Snapshot an, sodass du den Inhalt über Snapshots… zurückholen kannst.

Save & export

Save as HTML — speichert den Inhalt als eigenständige, hell gestaltete HTML-Datei mit eingebettetem Stylesheet, sodass das Ergebnis auf weißem Grund lesbar ist, unabhängig vom Editor-Theme. Code wird statisch syntaxbeleuchtet, Formeln mit KaTeX gerendert, ausklappbare Abschnitte aufgeklappt; Überschriften bekommen lesbare Anker-IDs statt interner Kennungen (aus „Über uns" wird uber-uns, eine zweite gleichnamige Überschrift uber-uns-2), der <title> ist die erste Überschrift. Das Dokument ist fest als Englisch ausgezeichnet (<html lang="en">) — das gilt ebenso für Print… und Save HTML in der Vorschau. Bei deutschem oder anderssprachigem Inhalt passt du das Attribut nach dem Speichern an, damit Screenreader und Silbentrennung die richtige Sprache verwenden.
Export Markdown… — siehe Markdown.
Export JSON (TipTap)… — siehe JSON.
Save as PDF — erzeugt ein PDF über html2pdf (html2canvas + jsPDF): A4 hoch, 10 mm Rand, doppelte Render-Auflösung, Seitenumbrüche möglichst nicht mitten durch eine Zeile.
Print… — öffnet ein hell gestaltetes Druckfenster (ein Popup-Blocker kann das verhindern; dann meldet das Tool es).

Copy to clipboard

Copy as formatted text — legt den Inhalt als formatierten Text (text/html) plus Klartext-Fassung in die Zwischenablage, sodass er formatiert in Mailprogramme, Word oder Google Docs eingefügt werden kann. Struktur und Formatierung kommen mit; Code-Blöcke tragen dabei nur die Klassennamen von highlight.js, Formeln das KaTeX-Markup — ein Stylesheet wird nicht mitkopiert. Ob Code farbig und Formeln sauber gesetzt ankommen, hängt deshalb vom Zielprogramm ab; für ein Ergebnis mit Farben und Formelsatz nimm Save as HTML. Unterstützt der Browser das nicht, wird nur Klartext kopiert.
Copy as HTML — das saubere HTML des Dokuments (mit lesbaren Überschriften-Ankern).
Copy as Markdown — das Dokument als Markdown, ohne Umweg über den Export-Dialog.

Import

Import Markdown… und Import JSON (TipTap)… — die Import-Dialoge, beschrieben in den beiden folgenden Abschnitten.

Alle Dateien, die der Editor speichert (HTML, Markdown, JSON, PDF), bekommen ihren Namen aus der ersten Überschrift des Dokuments, z. B. mein-bericht.md (in Kleinbuchstaben, ohne Akzente — aus ü wird u, aus ß wird ss — und höchstens 60 Zeichen lang). Ohne Überschrift dient die erste Textzeile als Vorlage; bleibt davon nichts Verwertbares übrig, heißt die Datei document.*. Dieselbe Quelle liefert den <title> der HTML-Datei.

Markdown (Import / Export)

Import Markdown… — öffnet den Import-Dialog. Oben lädst du über Load from URL rohes Markdown von einer Adresse (über denselben Proxy wie oben), unten fügst du Markdown ins Textfeld ein oder lädst mit Load .md file eine lokale .md-, .markdown- oder .txt-Datei. URL und Datei landen zunächst im Textfeld, sodass du vor dem Übernehmen noch prüfen und ändern kannst. Import ersetzt dann den Editor-Inhalt (mit automatischem Snapshot vorher).
Export Markdown… — wandelt den aktuellen Inhalt in Markdown um und zeigt ihn in einem Dialog; Copy legt ihn in die Zwischenablage, Save .md file speichert ihn als Datei.

Markdown muss nicht über den Dialog kommen: Fügst du Klartext ein, der nach Markdown aussieht (Überschriften, Listen, Fences, Tabellen, **fett**, Links …), rendert der Editor ihn direkt als formatierten Inhalt. Das gilt nicht in Code-Blöcken und nicht, wenn die Zwischenablage ohnehin HTML enthält; mit Strg+Umschalt+V fügst du den Text unverändert ein.

Details zum Round-Trip stehen unter Markdown-Verarbeitung.

JSON (Import / Export)

Import JSON (TipTap)… — lädt ein TipTap-/ProseMirror-Dokument als JSON (eingefügt oder über Load .json file). Das ist das native, verlustfreie Dokumentmodell des Editors — aber nur für genau diesen Editor sinnvoll, weil es vom Knoten-Schema abhängt. Der Editor prüft das JSON vor dem Laden gegen sein Schema; ungültiges oder fremdes JSON wird mit „Invalid JSON - not a valid TipTap document" abgewiesen, der aktuelle Inhalt bleibt unangetastet.
Export JSON (TipTap)… — gibt das aktuelle Dokument als formatiertes JSON aus (Copy oder Save .json file).

Snapshots

Snapshots… im File-Menü öffnet die Versionsablage. Mit einem optionalen Namen (bis 80 Zeichen) und Save current document sicherst du den aktuellen Stand; ohne Namen dient die erste Überschrift (bzw. Textzeile) als Bezeichnung. Die Liste zeigt je Snapshot Name, Zeitpunkt, Größe und ob er automatisch entstanden ist, dazu Restore und einen Lösch-Button.

Automatische Snapshots legt der Editor an, bevor er das Dokument ersetzt: beim Öffnen einer Datei (auch per Drag-and-drop), beim Markdown-Import, beim JSON-Import, beim Laden von einer URL im Ersetzen-Modus, bei Clear document und vor einem Restore. Ist der Stand identisch mit dem letzten Snapshot, entsteht kein Duplikat. Keinen Snapshot gibt es bei Apply im HTML-Quelltext und beim Laden von einer URL im Modus Insert at the cursor position — dort ist Strg+Z der Rückweg.
Grenzen: Es werden höchstens 20 Snapshots gehalten; darüber fallen zuerst die ältesten automatischen weg. Reicht der Browser-Speicher nicht, kürzt der Editor die Liste nach demselben Prinzip.
Restore ersetzt den Inhalt und lässt sich mit Strg+Z rückgängig machen.

Snapshots liegen wie die Auto-Speicherung nur im lokalen Browser-Speicher.

HTML source (HTML-Quelltext)

Edit HTML source… zeigt das HTML des Dokuments formatiert in einem Code-Editor (ACE mit Syntax-Hervorhebung, eingerückt über js-beautify; beides wird erst beim ersten Öffnen nachgeladen). Du kannst den Quelltext mit Copy kopieren oder ändern und mit Apply übernehmen. Dabei gilt das Schema des Editors: Es bleibt nur Markup erhalten, das der Editor kennt — Skripte, Klassen oder eigene Styles fallen weg. Apply ersetzt das ganze Dokument, legt aber keinen automatischen Snapshot an; rückgängig machst du es mit Strg+Z.

Clipboard und History

Cut / Copy / Paste (Strg+X / Strg+C / Strg+V) — Ausschneiden, Kopieren, Einfügen. Innerhalb des Editors bleibt beim Einfügen der genaue Inline-/Block-Kontext erhalten (ein kopiertes Wort wird kein neuer Absatz); externer Inhalt wird bevorzugt als Rich-HTML, sonst als Klartext übernommen. Blockiert der Browser den Zugriff des Paste-Buttons auf die Zwischenablage, nimm Strg+V.
Undo / Redo (Strg+Z / Strg+Y) — Rückgängig und Wiederherstellen über den TipTap-Verlauf (UndoRedo).

Find / Replace (Suchen / Ersetzen)

Find (Strg+F) und Find & Replace (Strg+H) öffnen eine Suchleiste über der Schreibfläche. Sie nutzt prosemirror-search, zeigt die Trefferzahl und hebt alle Treffer hervor. Die Tastenkürzel greifen, solange der Fokus im Editor liegt (oder im Vollbild); außerhalb bleibt die Suche des Browsers erreichbar.
Optionen: Case (Groß-/Kleinschreibung beachten), Word (nur ganze Wörter), Regex (Regulärer Ausdruck; ein ungültiger Ausdruck wird als „Invalid regex" angezeigt). Der Button Replace blendet die Ersetzen-Zeile ein; dort ersetzt Replace den aktuellen Treffer und springt weiter, Replace all alle Treffer. Enter springt zum nächsten Treffer, Shift+Enter zum vorherigen, Esc schließt die Leiste.

Page width (Seitenbreite)

Ein Aufklappmenü legt die Breite der Schreibfläche fest: Full width, Wide (1100 px) oder Narrow (760 px) für eine angenehme Zeilenlänge. Die Wahl wird im Browser gemerkt und betrifft nur die Ansicht, nicht den Export.

Editor theme (Editor-Thema)

Drei Schreibflächen-Themes: Dark, Light, Sepia. Die Wahl wird im Browser gemerkt. Wichtig: Das ist nur die Optik der Schreibfläche — Vorschau, Druck, HTML- und PDF-Export sind immer hell gestaltet, damit das Ergebnis überall lesbar ist.

Preview / view (Vorschau und Ansicht)

Show invisible characters — blendet unsichtbare Zeichen (Leerzeichen, Umbrüche) ein und aus.
Table of contents — öffnet ein seitliches Inhaltsverzeichnis aus allen Überschriften, hierarchisch nummeriert (1, 1.1, 1.2 …); ein Klick springt zur Stelle. Überschriften innerhalb ausklappbarer Abschnitte zählen mit, der Titel eines ausklappbaren Abschnitts selbst nicht.
Preview (Light) — zeigt den Inhalt schreibgeschützt und hell gerendert in einem Dialog, mit eigenen Buttons Save HTML, Print und PDF.
Toggle fullscreen — Vollbild-/ablenkungsfreier Modus; Esc verlässt ihn (ist die Suchleiste offen, schließt Esc zuerst diese).

Block type (Blocktyp)

Ein Aufklappmenü, das den aktuellen Block umschaltet: Paragraph, Heading 1–Heading 6, Code block, Quote. Das Label zeigt jeweils den aktiven Blocktyp.

Code language (Code-Sprache)

Setzt die Syntax-Highlighting-Sprache des aktuellen Code-Blocks (oder erzeugt einen, wenn der Cursor in keinem ist). Auswahl: Plain text plus 17 Sprachen — HTML/XML, CSS, JavaScript, PHP, Python, Java, C, C++, C#, Ruby, Go, Rust, SQL, Bash, JSON, YAML, Markdown. Die Hervorhebung leistet lowlight mit der highlight.js-Engine (siehe Syntax-Highlighting).

Font family (Schriftart)

Setzt die Schriftart der Auswahl: Default font plus neun Stacks (Arial, Times New Roman, Georgia, Courier New, Verdana, Trebuchet MS, Tahoma, Comic Sans MS, Monospace).

Inline marks (Textauszeichnung)

Die Inline-Marken: Bold (Strg+B), Italic (Strg+I), Underline (Strg+U), Strikethrough, Inline code, Subscript (tief), Superscript (hoch). Aktive Marken werden in der Toolbar hervorgehoben.

Color & highlight (Farbe und Hervorhebung)

Text color — ein Aufklappmenü mit elf Farbfeldern (Red, Orange, Yellow, Green, Teal, Blue, Purple, Pink, Grey, Black, White), einem Farbwähler Custom… für jede andere Farbe (wirkt schon beim Ziehen) und Remove zum Entfernen. Ein Farbbalken am Button zeigt die Farbe an der Cursor-Position.
Highlight (Strg+Umschalt+H) — Textmarker-Hervorhebung in der Standardfarbe. Der kleine Pfeil daneben (Highlight color) bietet sechs Markerfarben (Yellow, Green, Blue, Pink, Orange, Purple) und Remove highlight.
Clear formatting — entfernt alle Marken und setzt Blöcke auf Absätze zurück.

Lists (Listen)

Bullet list (Aufzählung), Numbered list (Nummerierung), Task list (Aufgabenliste mit Checkboxen, verschachtelbar).

Alignment (Ausrichtung)

Align left / center / right und Justify (Blocksatz) für Überschriften und Absätze.

Insert (Einfügen)

Link (Strg+K) — öffnet den Link-Dialog mit URL, Text (leer = die URL selbst) und Open in a new tab (standardmäßig an). Eine bloße Domain wie example.com wird zu https://example.com, eine E-Mail-Adresse zu mailto:…; Anker (#…) und relative Pfade bleiben unverändert. javascript:-, vbscript:- und data:-Links lehnt der Dialog ab. Steht der Cursor in einem Link, bearbeitet der Dialog ihn und bietet zusätzlich Remove link. Beim Tippen und Einfügen werden URLs automatisch verlinkt; ein Klick auf einen Link öffnet ihn im Editor nicht.
Remove link — entfernt den Link an der Cursor-Position.
Insert image — Aufklappmenü: From URL öffnet den Bild-Dialog mit Image URL (http(s) oder ein Pfad ab /), Alt text (leer nur für rein dekorative Bilder) und Title (optionaler Tooltip); Upload (base64) bettet eine lokale Bilddatei als base64 ein. Bilder lassen sich auch per Drag-and-drop in den Editor ziehen oder als Bilddatei aus der Zwischenablage einfügen. Ein eingefügtes Bild skalierst du über die Eck-Griffe (Seitenverhältnis bleibt, mindestens 40 × 20 px).
Table — Insert table (3×3 mit Kopfzeile) plus Operationen: Add column before/after, Delete column, Add row before/after, Delete row, Toggle header row, Merge / split cells, Delete table. Spaltenbreiten lassen sich ziehen.
Horizontal rule — waagerechte Trennlinie.
Collapsible section — ein ausklappbarer <details>-Abschnitt; der Cursor landet direkt im Titel (Summary), darunter folgt der Inhalt.
Math (KaTeX) — Inline math ($…$) oder Block math ($$…$$) öffnen den Formel-Dialog Math (LaTeX): Umschalter Inline ($…$) / Block ($$…$$), ein LaTeX-Feld und eine Live-Vorschau mit KaTeX. Apply oder Strg+Enter übernimmt. Ein Klick auf eine gerenderte Formel öffnet sie im selben Dialog zum Bearbeiten (die Art — inline oder Block — ist dann fest).
Emoji — durchsuchbarer Emoji-Picker (zeigt bis zu 120 Treffer). Alternativ im Text : tippen für die Shortcode-Autovervollständigung; klassische Emoticons wie :) werden ebenfalls umgewandelt.

Kontextabhängig erscheinen kleine schwebende Menüs:

Auswahl: Bei markiertem Text Bold, Italic, Underline, Strikethrough, Inline code, Link, Highlight und Clear formatting.
Link: Steht der Cursor in einem Link, zeigt die Blase die Zieladresse (ein Klick öffnet sie in einem neuen Tab) sowie Edit link, Copy link address und Remove link.
Bild: Bei ausgewähltem Bild Alt (Alt-Text und Titel bearbeiten), Original size (Skalierung zurücksetzen) und Remove image.
Tabelle: Steht der Cursor in einer Tabelle, erscheint über der Tabelle eine Leiste mit Zeile oberhalb/unterhalb einfügen, Zeile löschen, Spalte links/rechts einfügen, Spalte löschen, Kopfzeile umschalten, Zellen verbinden/teilen und Tabelle löschen.

Fährst du über einen Block, zeigt sich links ein Drag-Handle zum Verschieben des Blocks.

Slash-Menü und Tastenkürzel

Tippst du / am Zeilenanfang oder nach einem Leerzeichen, öffnet sich das Slash-Menü. Weitertippen filtert die Liste (nach Titel und Stichwörtern wie todo, latex oder divider), Pfeiltasten und Enter oder Tab wählen aus. Ungefiltert zeigt das Menü die ersten zwölf Einträge; Collapsible section und die beiden Formel-Einträge erscheinen, sobald du etwa /coll oder /math tippst. Die Einträge: Text, Heading 1, Heading 2, Heading 3, Bullet list, Numbered list, Task list, Quote, Code block, Table (3 × 3 mit Kopfzeile), Image (öffnet den Bild-Dialog), Divider (Trennlinie), Collapsible section, Math block und Inline math (öffnen den Formel-Dialog). In Code-Blöcken und Inline-Code bleibt / ein normales Zeichen — ein Pfad wie /usr/bin löst also nichts aus.

Die wichtigsten Kürzel im Überblick:

Kürzel	Wirkung
`Strg+B` / `Strg+I` / `Strg+U`	fett / kursiv / unterstrichen
`Strg+Umschalt+H`	Hervorhebung (Highlight)
`Strg+K`	Link-Dialog
`Strg+Z` / `Strg+Y`	Rückgängig / Wiederherstellen
`Strg+F` / `Strg+H`	Suchen / Suchen und Ersetzen
`Strg+Umschalt+V`	Einfügen ohne Markdown-Umwandlung
`Strg+Enter`	Formel im Formel-Dialog übernehmen
`/`	Slash-Menü
`:`	Emoji-Autovervollständigung
`Esc`	Suchleiste schließen bzw. Vollbild verlassen

Die Extensions im Überblick

Der Editor bündelt diese TipTap-Extensions (faktische Liste aus dem Bundle):

StarterKit — Basis-Knoten und -Marken: Absatz, Überschriften (H1–H6), fett, kursiv, unterstrichen, durchgestrichen, Inline-Code, Zitat, Aufzählungs-/Nummerierungslisten, waagerechte Linie, Hard-Break, Rückgängig/Wiederherstellen (UndoRedo) und die Markdown-Eingaberegeln. (Der eingebaute Link und Code-Block sind deaktiviert und durch die spezialisierten Versionen ersetzt.)
Link — eigenständig konfiguriert (Auto-Link mit https als Standardprotokoll, Link beim Einfügen, kein Öffnen per Klick im Editor).
CodeBlockLowlight — Code-Blöcke mit Syntax-Highlighting.
TextStyle, Color, FontFamily — Textfarbe und Schriftart.
Highlight (mehrfarbig), Subscript, Superscript.
TextAlign — Ausrichtung für Überschriften und Absätze.
TaskList / TaskItem — Aufgabenlisten (verschachtelbar).
Table / TableRow / TableHeader / TableCell — Tabellen (in der Breite anpassbar).
Image — Bilder, base64 erlaubt, mit Größenänderung über Eck-Griffe.
Details / DetailsSummary / DetailsContent — ausklappbare Abschnitte.
Typography — typografische Ersetzungen (z. B. Anführungszeichen, Gedankenstriche).
Mathematics — KaTeX-Formeln, inline und als Block.
CharacterCount — Wortzählung (für die Statusleiste).
InvisibleCharacters — unsichtbare Zeichen anzeigen.
FileHandler — Drag-and-drop von Bildern (als base64) sowie von HTML-/Markdown-Dateien (öffnen als neues Dokument); eingefügte Bilddateien werden ebenfalls als base64 eingebettet.
Placeholder — Platzhaltertext im leeren Editor.
Emoji — Emoji-Knoten mit :shortcode:-Autovervollständigung und Emoticon-Umwandlung.
TableOfContents — Inhaltsverzeichnis aus den Überschriften.
prosemirror-search — Suchen und Ersetzen.
Suggestion — die Grundlage für das Slash-Menü und die Emoji-Vorschläge.
BubbleMenu — die vier kontextabhängigen Menüs (Auswahl, Link, Bild, Tabelle).
DragHandle — der Block-Verschiebegriff.

Markdown-Import und -Export

Markdown wird über einen HTML-Round-Trip verarbeitet, der die etablierten Bibliotheken des Projekts nutzt:

Import (Markdown → HTML): markdown-it (öffnet in neuem Tab) mit aktivem linkify (auch bloße Domains werden verlinkt) und HTML-Durchlass, plus Plugins für Aufgabenlisten, Tiefstellung (~x~), Hochstellung (^x^), Hervorhebung (==x==), Fußnoten und Definitionslisten. YAML-Frontmatter am Dokumentanfang wird in einen yaml-Code-Block umgewandelt, statt zerschossen zu werden. LaTeX-Mathematik ( $…$ / $$…$$) wird erkannt und als Formel-Knoten eingesetzt; $-Zeichen in Code werden geschützt, und Beträge wie $5 and $10 werden nicht als Formel gelesen.
Export (HTML → Markdown): Turndown (öffnet in neuem Tab) mit der GitHub-Flavored-Markdown-Erweiterung. Überschriften im ATX-Stil (#), Aufzählungen kompakt mit - , Code-Blöcke gefenced. Eigene Regeln sorgen dafür, dass das Ergebnis beim erneuten Import dasselbe Dokument ergibt:
- Durchgestrichen als ~~x~~ (ein einfaches ~x~ würde beim Import als Tiefstellung gelesen), Tief-/Hochstellung als ~x~ / ^x^, Formeln als $…$ / $$…$$.
- Hervorhebung als ==x==; eine Hervorhebung in einer anderen Farbe als <mark style="…">.
- Was Markdown nicht ausdrücken kann, bleibt als Inline-HTML erhalten: Unterstreichung (<u>), Textfarbe und Schriftart (<span style>), zentrierte, rechtsbündige oder im Blocksatz gesetzte Absätze und Überschriften (<p> bzw. <h1>–<h6> mit style="text-align:…" — eine zentrierte Überschrift kommt also als HTML statt als ## … heraus), ausklappbare Abschnitte (<details><summary> mit Markdown dazwischen) und skalierte Bilder (<img width>).
- Tabellen: | in Zellen wird escaped, die Spaltenausrichtung schreibt der Export als :--/:-:/--:. Beim erneuten Import bleiben zentrierte (:-:) und rechtsbündige (--:) Spalten erhalten; eine ausdrücklich linksbündige Spalte (:--) fällt auf die Standardausrichtung zurück.
- Ein yaml-Code-Block am Dokumentanfang wird wieder zu echtem ----Frontmatter.
- Überschriften und Links bleiben einzeilig.

Exportierst du, importierst das Ergebnis wieder und exportierst erneut, kommt in der Regel dasselbe Markdown heraus — Ausnahme sind linksbündig markierte Tabellenspalten: Aus :-- wird beim zweiten Export ---.

Grenzen des Markdown-Round-Trips

SVG-Bilder als data:-URL überleben den Markdown-Import nicht (bewusst aus Sicherheitsgründen, weil ein Link auf ein SVG dessen Skripte ausführen könnte). Über den HTML- und JSON-Weg funktionieren sie. Raster-Bilder (PNG, JPEG, GIF, WebP, BMP, ICO, AVIF) als base64 bleiben erhalten.
Fußnoten und Definitionslisten werden beim Import abgeflacht, weil der Editor dafür keine eigenen Knoten hat: Fußnoten-Verweise werden zu hochgestellten Zahlen mit nummerierter Liste, Definitionen zu - **Begriff** — Definition.
Inline-HTML im Export: Unterstreichung, Farben, Ausrichtung, ausklappbare Abschnitte und Bildgrößen kommen als HTML heraus. Das liest dieser Editor (und jeder Renderer mit HTML-Durchlass) wieder ein; Systeme, die HTML in Markdown filtern, verlieren diese Formatierungen.
Markdown hat keine native Syntax für Tief-/Hochstellung und Hervorhebung — dafür kommen die Konventionen ~x~, ^x^ und ==x== zum Einsatz, die nicht jeder Markdown-Renderer versteht.

Syntax-Highlighting

Code-Blöcke werden farblich hervorgehoben — über lowlight, das die highlight.js-Engine kapselt. Im laufenden Editor zeichnet TipTap die Farben über ProseMirror-Dekorationen (nur für die Ansicht). Weil diese Dekorationen nicht im serialisierten HTML landen, beleuchtet das Tool für Vorschau, Druck, Export und Copy as formatted text die Code-Blöcke zusätzlich statisch mit highlight.js neu. Der registrierte Sprachsatz umfasst die 17 oben genannten Sprachen; die Sprache eines Blocks wählst du über das Code language-Menü.

Statusleiste und Auto-Speicherung

Unter der Schreibfläche zeigt eine Statusleiste die Dokument-Kennzahlen im Format „HTML: N bytes | N words | N blocks | ~N min read" (Bytes des HTML, Wortzahl, Anzahl der Blöcke auf oberster Ebene, geschätzte Lesezeit bei 200 Wörtern/Minute); bei leerem Editor steht dort „Empty document".

Der Inhalt wird automatisch im lokalen Browser-Speicher gesichert (eine Sekunde nach der letzten Eingabe und noch einmal beim Verlassen der Seite). Beim nächsten Öffnen stellt der Editor ihn wieder her; dieser Restore landet nicht im Undo-Verlauf, sodass Strg+Z das wiederhergestellte Dokument nicht leert. Das Badge oben rechts zeigt „Saved HH:MM". Ist der Speicher voll (typischerweise durch viele base64-Bilder) oder gesperrt, färbt sich das Badge rot, und ein einmaliger Hinweis rät, das Dokument als Datei zu sichern.

Für die automatische Speicherung gibt es einen Platz (das aktuelle Dokument); ältere Stände hältst du über die Snapshots fest. Editor-Theme und Seitenbreite merkt sich der Browser ebenfalls.

Architektur und Datenschutz

Der Editor läuft fast vollständig clientseitig:

Im Browser: das gesamte Bearbeiten, der Markdown-, JSON- und HTML-Export, das Kopieren, der PDF-Export, die Vorschau und der Druck, der HTML-Quelltext-Editor sowie Auto-Speicherung und Snapshots. Dein Inhalt wird nur im lokalen Browser-Speicher gehalten und nie auf einen Server hochgeladen.
Serverseitig — nur der URL-Abruf: Load from URL… im File-Menü und Load from URL im Markdown-Import holen die fremde Seite über einen serverseitigen JPKCom-Proxy, weil der Browser fremde Seiten wegen CORS nicht direkt laden darf. Die Zielseite sieht damit einen Request vom JPKCom-Server (mit dessen User-Agent), nicht deine IP-Adresse.

Die beiden serverseitigen Endpunkte (ein Fetch-Proxy und ein Token-Endpunkt) sind kein öffentliches API, das du selbst aufrufen kannst — sie werden ausschließlich vom JavaScript des Tools genutzt und sind gegen Missbrauch gehärtet:

Token-Authentifizierung: Vor jedem Abruf holt das Tool ein frisches Token aus zwei SHA-256-Komponenten mit Zeitstempel, das höchstens fünf Minuten gilt. Der Token-Endpunkt prüft den Referer und ein täglich rotierendes Secret.
SSRF-Schutz: private, lokale und interne IP-Adressen werden blockiert, auch nach jeder Weiterleitung erneut; nur HTTP/HTTPS und nur die Ports 80, 443, 3000, 5000, 8000, 8008, 8080 und 8443 — eine Adresse auf einem anderen Port weist der Proxy mit „Invalid URI" ab.
Grenzen: maximale Antwortgröße 950 KB, Timeout 10 s je Abruf (Verbindungsaufbau 5 s), höchstens fünf Weiterleitungen mit zusammen 30 s, maximale Ausführungszeit 20 s.
Rate-Limit: höchstens 120 Abrufe pro Minute und IP-Adresse; darüber antwortet der Proxy mit einer lesbaren „Too many requests"-Meldung.

Optional gibt es einen Expert Mode mit einem lokalen Proxy (http://127.0.0.1:<port>): Statt über den JPKCom-Server holt dann ein selbst betriebener lokaler Proxy die Seite. Die Einrichtung ist fortgeschritten und für den normalen Betrieb nicht nötig.

Beim Laden fremder Inhalte (URL, Datei, Markdown, Einfügen) verarbeitet der Editor das HTML in einem inaktiven Dokument, sodass darin enthaltene Skripte oder Event-Handler nicht ausgeführt werden; was der Editor nicht kennt, fällt beim Übernehmen ohnehin weg.

Betriebsgrenzen — kompakt

Ein Dokument, keine Kollaboration. Es gibt einen automatisch gespeicherten Arbeitsstand plus bis zu 20 Snapshots, alles im Browser. Browserdaten löschen heißt Inhalt und Snapshots verlieren — wichtige Stände vorher als Datei exportieren.
base64-Bilder blähen auf. Per Upload, Drag-and-drop oder Einfügen eingebettete Bilder landen als base64 direkt im HTML, im lokalen Speicher und in jedem Snapshot; viele oder große Bilder können das Speicher-Kontingent sprengen. Bilder vorher verkleinern (siehe Tipps).
JSON nur aus diesem Editor. Der JSON-Import ist nur für JSON gedacht, das dieser Editor exportiert hat; fremdes JSON wird abgewiesen.
HTML wird aufs Schema reduziert. Beim Öffnen, Laden von einer URL und im Quelltext-Editor bleibt nur Markup erhalten, das der Editor kennt (keine Skripte, Klassen oder eigenen Styles).
URL-Abruf: nur öffentliche http(s)-Adressen auf den Ports 80, 443, 3000, 5000, 8000, 8008, 8080 oder 8443, max. 950 KB, kein localhost/Intranet, max. 120 Abrufe pro Minute.
Emojis: nur solche mit nativem Unicode-Zeichen (bis Unicode 15.0); neuere oder reine Bild-Emojis sind aus Darstellungs- und Datenschutzgründen entfernt.

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