# WYSIWYG Editor — Tipps & Tricks

> Kniffe für den WYSIWYG-Editor: Markdown- und HTML-Round-Trip, Grenzen von base64-Bildern, Auto-Speicherung und die Kombination mit dem Markdown-Editor.

Source: https://www.jpkc.com/db/tools/wysiwyg/tips/

Zurück zur Übersicht: [WYSIWYG Editor](https://www.jpkc.com/db/tools/wysiwyg/) · Tool live öffnen: [www.jpkc.com/tools/wysiwyg/](https://www.jpkc.com/tools/wysiwyg/)

Das [Manual](https://www.jpkc.com/db/tools/wysiwyg/manual/) erklärt jede Funktion, die [Beispiele](https://www.jpkc.com/db/tools/wysiwyg/examples/) zeigen die Arbeitsabläufe. Hier geht es um das, was beides voraussetzt, aber selten dabeisteht: das richtige Format wählen, die Round-Trip-Grenzen kennen und das Tool sinnvoll mit anderen kombinieren.

## Das richtige Export-Format wählen

Der Editor kann in vier Formate ausgeben — und jedes hat seinen Zweck:

- **Markdown** — für portablen, menschenlesbaren Text: READMEs, Doku, Blog-Posts, alles, was später in ein Markdown-System geht. Verlustbehaftet bei Spezialfällen (siehe unten), aber maximal kompatibel.
- **HTML** (Save as HTML file) — eine **eigenständige, hell gestaltete** Datei mit eingebettetem Stylesheet, hervorgehobenem Code und gerenderten Formeln. Gut zum Weitergeben oder direkten Hochladen.
- **JSON** — das **verlustfreie** native TipTap-Dokument. Nur für genau diesen Editor sinnvoll, ideal als exakter Zwischenstand zwischen zwei Sitzungen.
- **PDF / Print** — für die feste Ausgabe auf Papier oder zum Versand. Immer hell, unabhängig vom Editor-Theme.

Merksatz: **Markdown zum Teilen, JSON zum Pausieren, HTML/PDF zum Ausliefern.**

## Round-Trip-Grenzen kennen

- **Highlight überlebt den Markdown-Export nicht.** Eine Textmarker-Hervorhebung (Highlight) wird beim **Import** aus `==x==` erkannt, hat aber beim **Export** nach Markdown keine Entsprechung — sie wird zu normalem Text. Wenn du Hervorhebungen behalten musst, exportiere als HTML oder JSON.
- **SVG-Bilder fallen beim Markdown-Round-Trip raus.** `data:`-URL-SVGs werden bewusst nicht durch den Markdown-Export geschleust (Sicherheit). Über HTML- und JSON-Export bleiben sie erhalten; Raster-Bilder (PNG, JPEG, GIF, WebP) als base64 überstehen auch Markdown.
- **Tief-/Hochstellung nutzt nicht-standardisierte Syntax.** Subscript/Superscript kommen als `~x~`/`^x^` heraus — das versteht nicht jeder Markdown-Renderer. Prüf, ob dein Zielsystem die Sub-/Sup-Erweiterung kennt.
- **YAML-Frontmatter wird zum Code-Block.** Importierst du Markdown mit `---`-Frontmatter, landet dieser als `yaml`-Code-Block im Dokument (statt als zerschossene Überschrift). Das ist gewollt — willst du echtes Frontmatter behalten, schneide es vor dem Import heraus und füge es nach dem Export wieder an.

## base64-Bilder im Griff behalten

Per **Upload (base64)** oder Drag-and-drop eingefügte Bilder werden **direkt ins Dokument eingebettet** — als base64-Zeichenkette im HTML. Das ist praktisch (eine Datei, keine externen Abhängigkeiten), hat aber zwei Kosten:

- Das **Dokument wird groß** — ein paar Fotos können das HTML und das exportierte Markdown stark aufblähen.
- Die **Auto-Speicherung** legt den gesamten Inhalt im lokalen Browser-Speicher ab; viele große base64-Bilder können das Speicher-Kontingent sprengen (das Speicher-Badge schlägt dann auf Rot um).

Praxis: **Bilder vorher verkleinern und in ein effizientes Format wandeln.** Genau dafür gibt es den [Graphic Editor](https://www.jpkc.com/db/tools/graphic/) — zuschneiden, skalieren, nach WebP/AVIF konvertieren, dann einbetten. Wo möglich, lieber **From URL** statt base64 nutzen, damit das Bild extern referenziert bleibt.

## Auto-Speicherung verstehen

- Der Inhalt wird **automatisch im Browser** gesichert und beim nächsten Besuch wiederhergestellt — bequem, aber **nicht** dauerhaft: Es gibt nur **einen** Speicherplatz (ein Dokument), und das Löschen der Browserdaten löscht auch den Inhalt.
- **Sichere wichtige Stände als Datei.** Vor größeren Umbauten oder vor dem Wechsel zu einem anderen Dokument: als JSON (verlustfrei) oder Markdown/HTML exportieren. **Clear editor content** löscht den Speicher unwiderruflich.
- Ein **neues Dokument** beginnst du, indem du den vorhandenen Inhalt löschst oder ersetzt — paralleles Arbeiten an mehreren Dokumenten ist nicht vorgesehen.

## Schneller arbeiten

- **Live-Markdown statt Toolbar.** `# `, `## `, `- `, `1. `, `> `, ` ``` `, `**…**`, `*…*` formatieren beim Tippen — oft schneller als der Griff zur Maus.
- **Auswahl-Blase nutzen.** Bei markiertem Text sind Bold, Italic, Underline, Strikethrough, Inline code und Add link direkt am Cursor.
- **Suchen & Ersetzen mit Regex.** `Strg+H` öffnet Ersetzen; die Optionen **Case**, **Word** und **Regex** machen auch größere Umbauten beherrschbar.
- **Inhaltsverzeichnis zum Springen.** Bei langen Dokumenten öffnet **Table of contents** eine Übersicht aller Überschriften — ein Klick springt zur Stelle.
- **Vollbild gegen Ablenkung.** **Toggle fullscreen** blendet alles aus; `Esc` bringt dich zurück.
- **Theme ist nur fürs Auge.** Dark/Light/Sepia ändern nur die Schreibfläche — die Ausgabe (Vorschau, Druck, HTML, PDF) ist immer hell.

## Stolperfallen

- **Import ersetzt, er ergänzt nicht.** Markdown-, JSON- und der Datei-Import sowie ein per Drag-and-drop geöffnetes Dokument **ersetzen** den gesamten Editor-Inhalt. Ein versehentliches Ersetzen lässt sich mit `Strg+Z` rückgängig machen.
- **JSON nur aus diesem Editor.** Der JSON-Import erwartet das Schema dieses Editors. Fremdes JSON wird abgewiesen (mit Fehlermeldung), der Inhalt bleibt erhalten.
- **`localhost`/Intranet gehen nicht.** Der URL-Abruf (HTML oder Markdown) blockiert aus Sicherheitsgründen private und interne Adressen; nur öffentliche http(s)-URLs bis 950 KB sind erlaubt.
- **Programmatisches Einfügen kann blockiert sein.** Der **Paste**-Button greift auf die System-Zwischenablage zu, was Browser einschränken; klappt es nicht, nimm einfach `Strg+V`.

## Mit anderen JPKCom-Tools kombinieren

- **[Markdown Editor](https://www.jpkc.com/db/tools/md/)** — der nächste Verwandte. Wer ohnehin in Markdown denkt, schreibt dort direkt mit Live-Vorschau, statt den Umweg über Rich-Text und Export zu gehen. Umgekehrt ist der WYSIWYG Editor die richtige Wahl, wenn du formatieren willst, ohne Markdown-Syntax im Kopf zu haben.
- **[HTML/Markdown-Konverter](https://www.jpkc.com/db/tools/source/)** — für reine, gezielte Umwandlungen ohne Editor-Oberfläche. Die HTML-zu-Markdown-Regeln des WYSIWYG-Editors stammen aus diesem Tool.
- **[Beautify](https://www.jpkc.com/db/tools/beautify/)** — das exportierte HTML einheitlich einrücken und formatieren.
- **[Graphic Editor](https://www.jpkc.com/db/tools/graphic/)** — Bilder zuschneiden, verkleinern und nach WebP/AVIF wandeln, bevor du sie als base64 einbettest (siehe oben).

---

Noch mehr Kontext: die [Übersicht](https://www.jpkc.com/db/tools/wysiwyg/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/wysiwyg/manual/) für jede Funktion und die [Beispiele](https://www.jpkc.com/db/tools/wysiwyg/examples/) für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/wysiwyg/).