# WYSIWYG Editor — Beispiele

> Praxisnahe Durchläufe mit dem WYSIWYG-Editor: Markdown exportieren und importieren, Tabelle und Code-Block einfügen, HTML laden und als Datei speichern.

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

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 und Extension im Detail. Diese Seite ergänzt das um **konkrete Arbeitsabläufe**: typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch — Button- und Menü-Namen stehen deshalb in ihrer englischen Original-Schreibweise, bei Bedarf mit deutscher Erläuterung.

## Beispiel 1: Rich-Text schreiben und als Markdown exportieren

Der klassische Fall — du willst komfortabel formatieren und am Ende sauberes Markdown haben (etwa für ein README oder einen Blog-Post).

1. Öffne den [Editor](https://www.jpkc.com/tools/wysiwyg/) und schreib los. Nutze die Live-Eingaberegeln: `# ` am Zeilenanfang macht eine Überschrift, `- ` eine Aufzählung, `**Wort**` setzt es fett. Oder greif zur Toolbar.
2. Formatiere wie gewohnt: Überschriften über das **Block type**-Menü, Links über **Add link**, eine Liste über **Bullet list**. Bei markiertem Text erscheint zusätzlich die Auswahl-Blase mit den wichtigsten Marken.
3. Wenn der Text steht, klick in der **Markdown**-Gruppe auf **Export**. Es öffnet sich ein Dialog mit dem generierten Markdown.
4. Von dort: **Copy** legt das Markdown in die Zwischenablage, **Save .md file** speichert es als `document.md`. Die Ausgabe ist GitHub-Flavored-Markdown mit ATX-Überschriften (`#`), `-`-Aufzählungen und gefencten Code-Blöcken.

Tief- und Hochstellung kommen als `~x~` und `^x^` heraus. Eine Textmarker-Hervorhebung (Highlight) wird beim Markdown-Export allerdings zu normalem Text — sie hat in Markdown keine Standard-Entsprechung.

## Beispiel 2: Markdown importieren und visuell überarbeiten

Du hast bestehendes Markdown (eine Datei, einen Schnipsel, eine `.md` im Netz) und willst es bequem weiterbearbeiten.

1. Klick in der **Markdown**-Gruppe auf **Import**. Der Dialog bietet drei Wege:
   - **Markdown einfügen** in das große Textfeld,
   - **Load .md file** für eine lokale Datei,
   - **Load from URL** für eine `.md`-Adresse im Netz (z. B. eine `index.md` einer Doku — der Abruf läuft über den JPKCom-Proxy).
2. Bestätige mit **Import**. Achtung: Der bestehende Editor-Inhalt wird **ersetzt**.
3. Der Editor rendert das Markdown als formatierten Text. YAML-Frontmatter am Anfang erscheint als `yaml`-Code-Block (statt zerschossen zu werden), Aufgabenlisten als Checkboxen, `$…$`/`$$…$$` als gerenderte Formeln.
4. Überarbeite alles visuell — und exportier es bei Bedarf wieder als Markdown (Beispiel 1) oder als HTML (Beispiel 4).

## Beispiel 3: Tabelle und Code-Block einfügen

Strukturierte Inhalte gehören zu fast jeder Doku.

1. **Tabelle:** Setz den Cursor an die gewünschte Stelle, öffne in der **Insert**-Gruppe das Tabellen-Menü und wähl **Insert table** (legt eine 3×3-Tabelle mit Kopfzeile an). Über dasselbe Menü fügst du Spalten/Zeilen davor oder danach ein, löschst sie, schaltest die Kopfzeile per **Toggle header row** um oder verbindest Zellen mit **Merge / split cells**. Spaltenbreiten lassen sich ziehen.
2. **Code-Block:** Tipp am Zeilenanfang ` ``` ` (Live-Regel) oder wähl im **Block type**-Menü **Code block**. Setz dann über das **Code language**-Menü die Sprache — z. B. **PHP** oder **JavaScript** — und der Block wird syntaxbeleuchtet.
3. Prüf das Ergebnis über **Preview (Light)**: Dort siehst du Tabelle und farbig hervorgehobenen Code so, wie sie auch im HTML- oder PDF-Export aussehen.

## Beispiel 4: HTML von einer URL laden, bearbeiten und als Datei speichern

Du willst den sichtbaren Inhalt einer fremden Seite (oder einer eigenen) übernehmen und weiterverarbeiten.

1. Klick in der **File operations**-Gruppe auf **Insert HTML from URL**. Trag im Dialog eine absolute http(s)-Adresse ein und bestätige mit **Fetch Content**.
2. Der serverseitige JPKCom-Proxy holt das HTML (nur öffentliche Adressen, max. 950 KB) und lädt es in den Editor. Relative Links/Bilder werden dabei in absolute URLs umgeschrieben.
3. Überarbeite den Inhalt im Editor — kürzen, umformatieren, eigene Absätze ergänzen.
4. Speichere über **Save as HTML file** eine **eigenständige HTML-Datei** (`document.html`) mit eingebettetem hellem Stylesheet, hervorgehobenem Code und gerenderten Formeln — fertig zum Weitergeben oder Hochladen.

## Beispiel 5: Eine Formel und einen ausklappbaren Abschnitt einbauen

Für technische oder didaktische Inhalte.

1. **Formel:** Öffne in der **Insert**-Gruppe das **Math**-Menü und wähl **Inline math ($…$)** oder **Block math ($$…$$)**. Gib den LaTeX-Ausdruck ein (z. B. `E = mc^2`) — KaTeX rendert ihn sofort. Ein Klick auf die fertige Formel öffnet sie wieder zum Bearbeiten.
2. **Ausklappbarer Abschnitt:** Klick auf **Collapsible section**. Es entsteht ein aufgeklappter `<details>`-Block: oben der Titel (Summary), darunter der Inhalt. Tipp Titel und Text hinein.
3. Im Export/Druck werden ausklappbare Abschnitte automatisch **aufgeklappt**, damit ihr Inhalt sichtbar und druckbar ist.

## Beispiel 6: Verlustfreier Zwischenstand per JSON

Du willst einen exakten Zwischenstand sichern und später unverändert weiterarbeiten — ohne die kleinen Verluste eines Markdown- oder HTML-Round-Trips.

1. Klick in der **JSON**-Gruppe auf **Export**. Du bekommst das native TipTap-Dokument als formatiertes JSON, kopierbar oder als `document.json` speicherbar.
2. Dieses JSON ist **verlustfrei** — es ist das exakte Dokumentmodell des Editors, inklusive aller Knoten und Marken.
3. Später lädst du es über **JSON → Import** (eingefügt oder als Datei) wieder ein. Nur für diesen Editor gedacht: Ist das JSON ungültig oder passt es nicht zum Schema, lehnt der Editor ab und behält den aktuellen Inhalt, statt ihn zu leeren.

Für den dauerhaften, portablen Austausch nimm Markdown oder HTML; für den exakten Zwischenstand zwischen zwei Sitzungen im selben Tool ist JSON die richtige Wahl.

---

Noch tiefer: 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 im Detail und die [Tipps & Tricks](https://www.jpkc.com/db/tools/wysiwyg/tips/) für Kniffe und Stolperfallen. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/wysiwyg/).