WYSIWYG Editor — Tipps & Tricks

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

Das Manual erklärt jede Funktion, die Beispiele 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 — 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 — 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 — für reine, gezielte Umwandlungen ohne Editor-Oberfläche. Die HTML-zu-Markdown-Regeln des WYSIWYG-Editors stammen aus diesem Tool.
Beautify — das exportierte HTML einheitlich einrücken und formatieren.
Graphic Editor — Bilder zuschneiden, verkleinern und nach WebP/AVIF wandeln, bevor du sie als base64 einbettest (siehe oben).

Noch mehr Kontext: die Übersicht zum großen Bild, das Manual für jede Funktion und die Beispiele für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im Tool.