# WYSIWYG Editor > Rich-Text-Editor auf TipTap-Basis mit Markdown-Import/-Export, HTML-Export und Code-Syntax-Highlighting — der Einstieg zu Manual, Beispielen und Tipps. Source: https://www.jpkc.com/db/tools/wysiwyg/ ## Schreiben wie in Word, herauskommen lassen wie ein Entwickler Der [WYSIWYG Editor](https://www.jpkc.com/tools/wysiwyg/) 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](https://tiptap.dev/) 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, Bilder (per URL oder als Datei-Upload), Tabellen (mit Spalten-/Zeilen-Operationen und Kopfzeile), Mathematik-Formeln (KaTeX, inline und als Block) und Emojis. - **Komfort**: Live-Markdown-Eingaberegeln (tippe `# ` für eine Überschrift, `- ` für eine Liste), eine Auswahl-Blase mit den wichtigsten Marken, Drag-Handle zum Verschieben von Blöcken, Suchen und Ersetzen, Inhaltsverzeichnis, drei Editor-Themes (dunkel, hell, sepia), Vollbild, Vorschau, Drucken und automatische Speicherung im Browser. ### Markdown rein und raus Markdown ist erstklassig unterstützt — **in beide Richtungen**. Du kannst Markdown importieren (eingefügt, als `.md`-Datei oder von einer URL geladen) und deinen aktuellen Inhalt jederzeit als Markdown exportieren (kopieren oder als `.md`-Datei speichern). Importiert wird über [markdown-it](https://github.com/markdown-it/markdown-it), exportiert über [Turndown](https://github.com/mixmark-io/turndown) mit GitHub-Flavored-Markdown-Erweiterung — inklusive Tabellen, Aufgabenlisten, Code-Blöcken und Formeln. ### HTML, JSON und PDF Über Markdown hinaus gibt es weitere Ein- und Ausgänge: eine **HTML-Datei** öffnen und bearbeiten oder den Inhalt als eigenständige HTML-Datei speichern; **HTML von einer URL** in den Editor laden; das native TipTap-Dokument als **JSON** exportieren und wieder importieren (verlustfrei, aber nur für diesen Editor gedacht); und schließlich **Vorschau, Drucken und PDF-Export**. Code-Blöcke werden dabei syntaxbeleuchtet — sowohl live im Editor als auch in Vorschau, Druck und Export. ## 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 wird automatisch im lokalen Browser-Speicher gesichert und nie auf einen Server hochgeladen. Die einzige Ausnahme ist der **Abruf einer fremden URL** (HTML einfügen 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](https://www.jpkc.com/db/tools/wysiwyg/manual/#architektur-und-datenschutz). ## Jetzt ausprobieren **[→ WYSIWYG Editor öffnen](https://www.jpkc.com/tools/wysiwyg/)** — 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. ## Verwandte JPKCom-Tools - **[Markdown Editor](https://www.jpkc.com/db/tools/md/)** — der nächste Verwandte: ein Markdown-zentrierter Editor mit Live-Vorschau. Ideal, wenn du lieber direkt in Markdown schreibst, statt es aus Rich-Text zu exportieren. - **[HTML/Markdown-Konverter](https://www.jpkc.com/db/tools/source/)** — wandelt HTML und Markdown ineinander um; die HTML-zu-Markdown-Regeln des WYSIWYG-Editors stammen aus genau diesem Tool. - **[Beautify](https://www.jpkc.com/db/tools/beautify/)** — das exportierte HTML hübsch und einheitlich einrücken. - **[Graphic Editor](https://www.jpkc.com/db/tools/graphic/)** — Bilder vorher zuschneiden, skalieren und in WebP/AVIF wandeln, bevor du sie einbettest (eingebettete Bilder landen als base64 im Dokument und blähen es auf). --- Tiefer geht es auf den Unterseiten: das **[Manual](https://www.jpkc.com/db/tools/wysiwyg/manual/)** mit jeder Funktion und Extension im Detail, **[Beispiele](https://www.jpkc.com/db/tools/wysiwyg/examples/)** aus der Praxis und gesammelte **[Tipps & Tricks](https://www.jpkc.com/db/tools/wysiwyg/tips/)**.