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. Was Markdown nicht kennt (Unterstreichung, Farben, Ausrichtung), kommt als Inline-HTML heraus; Details siehe unten.
HTML (Save as HTML) — eine eigenständige, hell gestaltete Datei mit eingebettetem Stylesheet, hervorgehobenem Code, gerenderten Formeln und lesbaren Überschriften-Ankern. 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 oder Browsern.
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.

Oft brauchst du gar keine Datei: Die Gruppe Copy to clipboard im File-Menü kopiert das Dokument direkt — Copy as formatted text für Mail, Word oder Google Docs (Struktur und Formatierung kommen mit; Code-Farben und Formelsatz hängen vom Zielprogramm ab, weil kein Stylesheet mitkopiert wird — dafür ist Save as HTML der sichere Weg), Copy as HTML für ein CMS-Feld, Copy as Markdown für Git-Repos, Wikis oder einen KI-Chat.

Round-Trip-Grenzen kennen

Erweiterte Syntax prüfen. Hervorhebung kommt als ==x==, Tief-/Hochstellung als ~x~/^x^ heraus. Dieser Editor liest das verlustfrei zurück, aber nicht jeder Markdown-Renderer versteht diese Erweiterungen. Prüf, ob dein Zielsystem sie kennt.
Inline-HTML im Markdown. Unterstreichung, Textfarbe, Schriftart, zentrierte Absätze, ausklappbare Abschnitte und skalierte Bilder exportiert der Editor als HTML-Schnipsel (<u>, <span style>, <details>, <img width> …). Filtert dein Zielsystem HTML in Markdown heraus, gehen genau diese Formatierungen verloren — dann lieber darauf verzichten oder als HTML exportieren.
SVG-Bilder fallen beim Markdown-Round-Trip raus. data:-URL-SVGs werden beim Markdown-Import bewusst verworfen (Sicherheit). Über HTML- und JSON-Export bleiben sie erhalten; Raster-Bilder (PNG, JPEG, GIF, WebP, AVIF …) als base64 überstehen auch Markdown.
Fußnoten und Definitionslisten werden flach. Beim Import werden Fußnoten zu hochgestellten Zahlen mit nummerierter Liste, Definitionslisten zu - **Begriff** — Definition. Der Inhalt bleibt, die Struktur nicht.
YAML-Frontmatter übersteht den Round-Trip. Importiertes ----Frontmatter erscheint im Editor als yaml-Code-Block am Anfang (statt als zerschossene Überschrift); beim Markdown-Export wird daraus wieder echtes Frontmatter. Das klappt nur, solange der yaml-Block der erste Block im Dokument bleibt.

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, und jeder Snapshot speichert ihn noch einmal; viele große base64-Bilder können das Speicher-Kontingent sprengen. Das Speicher-Badge schlägt dann auf Rot um, ein Hinweis rät zum Speichern als Datei, und bei den Snapshots kürzt der Editor die Liste.

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. Das Verkleinern per Eck-Griff im Editor ändert übrigens nur die angezeigte Größe (width/height), nicht die eingebettete Datei.

Und weil der Bild-Dialog ein Feld Alt text hat: Füll es aus. Bei bereits eingefügten Bildern erreichst du es über die Bild-Blase (Alt), sobald du das Bild anklickst.

Auto-Speicherung verstehen

Der Inhalt wird automatisch im Browser gesichert (das Badge zeigt „Saved" mit Uhrzeit) und beim nächsten Besuch wiederhergestellt — bequem, aber nicht dauerhaft: Das Löschen der Browserdaten löscht auch Inhalt und Snapshots.
Snapshots als Versionsablage. Vor größeren Umbauten sicherst du den Stand über File → Snapshots… unter einem sprechenden Namen. Bevor der Editor das Dokument ersetzt (Öffnen, Markdown- oder JSON-Import, Laden von URL im Ersetzen-Modus, Clear document, Restore), legt er selbst einen an — ein versehentliches Clear document ist also kein Drama. Ausnahme: Apply im HTML-Quelltext erzeugt keinen Snapshot, dort hilft Strg+Z.
Sichere wichtige Stände trotzdem als Datei. Snapshots liegen im selben Browser-Speicher wie das Dokument. Für ein echtes Backup oder den Wechsel auf einen anderen Rechner exportierst du als JSON (verlustfrei) oder Markdown/HTML.
Mehrere Dokumente bearbeitest du nicht parallel, aber nacheinander: Sichere das aktuelle als Snapshot, beginne mit Clear document ein neues und hol das alte später per Restore zurück.

Schneller arbeiten

Slash-Menü statt Toolbar. / am Zeilenanfang öffnet eine filterbare Liste: /h2, /table, /todo, /code, /math — Enter, fertig.
Live-Markdown beim Tippen. # , ## , - , 1. , > , ```, **…**, *…* formatieren direkt — oft schneller als der Griff zur Maus.
Markdown einfach einfügen. Kopierst du Markdown als Klartext (aus einer .md-Datei, einem Chat, einem Terminal), wird es beim Einfügen formatiert. Willst du die Zeichen roh behalten, nimm Strg+Umschalt+V.
Links per Strg+K. Der Link-Dialog ergänzt https:// bei bloßen Domains und mailto: bei E-Mail-Adressen von selbst. Steht der Cursor in einem Link, zeigt eine Blase das Ziel und bietet Bearbeiten, Kopieren und Entfernen.
Blasen nutzen. Bei markiertem Text sind Bold, Italic, Underline, Strikethrough, Inline code, Link, Highlight und Clear formatting direkt am Cursor; in Tabellen erscheint die Zeilen-/Spalten-Leiste über der Tabelle.
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 nummerierte Übersicht aller Überschriften — ein Klick springt zur Stelle.
Lesbare Zeilenlänge. Page width → Narrow (760 px) schmälert die Schreibfläche auf breiten Monitoren; Toggle fullscreen blendet alles andere 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.
Erste Überschrift = Dateiname. Gib dem Dokument früh eine Überschrift; HTML-, Markdown-, JSON- und PDF-Export heißen dann danach (ohne Überschrift nimmt der Editor die erste Textzeile). Auch Snapshots ohne eigenen Namen tragen diesen Titel.

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. Rückweg: Strg+Z oder der automatische Snapshot. Willst du eine Webseite ergänzend übernehmen, wähl bei Load from URL… die Option Insert at the cursor position.
Das Schema filtert. Beim Öffnen von HTML, beim Laden von URLs und bei Apply im Quelltext-Editor bleibt nur, was der Editor darstellen kann. Klassen, eigene Styles, Skripte und Formulare verschwinden — der Editor ist kein HTML-Seitenbauer.
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, höchstens 120 Abrufe pro Minute.
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. Gleiches gilt für Copy as formatted text: Ohne Browser-Unterstützung kopiert der Editor nur Klartext.
Druckfenster und Popup-Blocker. Print… öffnet ein neues Fenster. Blockiert der Browser es, erlaube Popups für die Seite oder nimm Save as PDF.

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. Es konvertiert mit einer eigenen Engine (html-to-markdown, WebAssembly) und liefert deshalb nicht immer dasselbe Markdown wie der Export des WYSIWYG-Editors.
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.