WYSIWYG Editor

Schreiben wie in Word, herauskommen lassen wie ein Entwickler

Der WYSIWYG Editor ist ein Rich-Text-Editor im Browser: Du schreibst auf einer einzigen, formatierten Fläche — fett, kursiv, Überschriften, Listen, Tabellen, Bilder, Code-Blöcke — und siehst dabei direkt, wie der Text aussieht. Kein geteiltes Quelltext-Fenster, keine Auszeichnungssprache im Weg. Unter der Haube entsteht trotzdem sauberes HTML, das du als HTML-Datei, als Markdown, als JSON oder als PDF wieder herausbekommst.

Das löst ein konkretes Problem: Wer Inhalte für eine Website, ein README oder eine Doku schreibt, will sich auf den Text konzentrieren — aber am Ende braucht es maschinenlesbares Markup. Der WYSIWYG Editor überbrückt genau das. Du tippst komfortabel, und beim Export wählst du das Format, das dein Zielsystem versteht.

Gedacht ist das Tool für alle, die formatierten Text erzeugen, ohne von Hand HTML oder Markdown zu tippen: Redaktion und Content-Leute, die Beiträge formatieren und als Markdown oder HTML weitergeben; Entwicklerinnen und Entwickler, die schnell ein Stück HTML zusammenbauen oder bestehendes Markdown visuell überarbeiten wollen; und alle, die ein vorhandenes Dokument (Markdown-Datei, HTML-Datei, Seite per URL) in eine bearbeitbare Form holen und wieder ausgeben möchten. Alles läuft im Browser, ohne Account und ohne Installation.

Was der Editor kann — gruppiert

Der Editor baut auf TipTap (öffnet in neuem Tab) auf (dem headless Rich-Text-Framework über ProseMirror) und bündelt dessen Erweiterungen zu einer kompletten Schreibumgebung. Die Funktionen lassen sich in drei Blöcke fassen.

Rich-Text-Bearbeitung

Die eigentliche Schreibfläche beherrscht die volle Bandbreite an Formatierung:

Textauszeichnung: fett, kursiv, unterstrichen, durchgestrichen, Inline-Code, hoch- und tiefgestellt, Textfarbe und Highlight.
Blöcke: Absatz, Überschriften H1 bis H6, Zitat, Code-Block, Aufzählungs-, Nummerierungs- und Aufgabenlisten (mit Checkboxen), waagerechte Linie, ausklappbare Abschnitte.
Einfügen: Links (über einen Dialog mit Strg+K), Bilder (per URL mit Alt-Text oder als Datei-Upload, per Eck-Griff skalierbar), Tabellen (mit Spalten-/Zeilen-Operationen und Kopfzeile), Mathematik-Formeln (KaTeX, inline und als Block, mit Live-Vorschau) und Emojis.
Komfort: ein Slash-Menü (tippe / für Überschriften, Listen, Tabelle, Bild, Formel …), Live-Markdown-Eingaberegeln (tippe # für eine Überschrift, - für eine Liste), eingefügtes Markdown wird automatisch formatiert, kontextabhängige Bubble-Menüs für Auswahl, Links, Bilder und Tabellen, Drag-Handle zum Verschieben von Blöcken, Suchen und Ersetzen, Inhaltsverzeichnis, drei Editor-Themes (dunkel, hell, sepia), wählbare Seitenbreite, Vollbild und Vorschau.
Sicherheitsnetz: automatische Speicherung im Browser plus Snapshots — benannte Zwischenstände, und bevor ein Öffnen, Import, Laden von einer URL oder Clear document das Dokument ersetzt, legt der Editor selbst einen an.

Markdown rein und raus

Markdown ist erstklassig unterstützt — in beide Richtungen. Du kannst Markdown importieren (im Import-Dialog, als .md-Datei, von einer URL geladen oder einfach in den Editor eingefügt) und deinen aktuellen Inhalt jederzeit als Markdown exportieren (kopieren oder als .md-Datei speichern). Importiert wird über markdown-it (öffnet in neuem Tab), exportiert über Turndown (öffnet in neuem Tab) mit GitHub-Flavored-Markdown-Erweiterung — inklusive Tabellen samt Spaltenausrichtung, Aufgabenlisten, Code-Blöcken, Hervorhebungen, Formeln und YAML-Frontmatter. Exportierst du, importierst das Ergebnis wieder und exportierst erneut, kommt in der Regel dasselbe Markdown heraus (Ausnahme: linksbündig markierte Tabellenspalten, siehe Manual).

HTML, JSON und PDF

Über Markdown hinaus gibt es weitere Ein- und Ausgänge, gebündelt im File-Menü: eine HTML-Datei öffnen und bearbeiten oder den Inhalt als eigenständige HTML-Datei speichern; HTML von einer URL laden (als neues Dokument oder an der Cursor-Position); den HTML-Quelltext direkt bearbeiten; das native TipTap-Dokument als JSON exportieren und wieder importieren (verlustfrei, aber nur für diesen Editor gedacht); den Inhalt als formatierten Text, HTML oder Markdown in die Zwischenablage kopieren; und schließlich Drucken und PDF-Export. Code-Blöcke werden dabei syntaxbeleuchtet — sowohl live im Editor als auch in Vorschau, Druck und Export. Exportierte Dateien heißen nach der ersten Überschrift des Dokuments.

Architektur: fast alles im Browser

Der Editor läuft fast vollständig clientseitig. Das Tippen, alle Formatierungen, der Markdown-, JSON- und HTML-Export sowie der PDF-Export passieren in deinem Browser; dein Inhalt und deine Snapshots werden im lokalen Browser-Speicher gesichert und nie auf einen Server hochgeladen. Die einzige Ausnahme ist der Abruf einer fremden URL (HTML oder Markdown von einer URL laden): Weil dein Browser fremde Seiten aus Sicherheitsgründen nicht direkt laden darf (CORS), holt sie ein serverseitiger JPKCom-Proxy — die Zielseite sieht damit einen Request vom JPKCom-Server, nicht deine IP. Details und die Sicherheitsgrenzen stehen im Manual.

Jetzt ausprobieren

→ WYSIWYG Editor öffnen — losschreiben, formatieren, im gewünschten Format exportieren. Ohne Account, kostenlos, direkt im Browser. Dein Text bleibt dank Auto-Speicherung erhalten, bis du ihn löschst — und selbst dann bleibt ein Snapshot zurück.