JPKCom DB

WYSIWYG Editor — Beispiele

Praxisnahe Durchläufe mit dem WYSIWYG-Editor: Markdown ex- und importieren, Tabelle und Code-Block, HTML von einer URL laden, Snapshots und HTML-Quelltext.

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

Das 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 und schreib los. Nutze die Live-Eingaberegeln: # am Zeilenanfang macht eine Überschrift, - eine Aufzählung, **Wort** setzt es fett. Oder tipp / und wähl den Blocktyp aus dem Slash-Menü.
  2. Formatiere wie gewohnt: Überschriften über das Block type-Menü, Links mit Strg+K (oder Link in der Toolbar), eine Liste über Bullet list. Bei markiertem Text erscheint zusätzlich die Auswahl-Blase mit den wichtigsten Marken.
  3. Wenn der Text steht, öffne das File-Menü und wähl Export Markdown…. 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 Datei, benannt nach deiner ersten Überschrift (aus „Mein Bericht" wird mein-bericht.md). Die Ausgabe ist GitHub-Flavored-Markdown mit ATX-Überschriften (#), --Aufzählungen und gefencten Code-Blöcken.

Brauchst du das Markdown nur kurz in der Zwischenablage, geht es schneller über File → Copy as Markdown. Durchgestrichenes kommt als ~~x~~ heraus, Tief- und Hochstellung als ~x~ und ^x^, eine Textmarker-Hervorhebung als ==x==. Unterstreichung, Textfarbe und Ausrichtung haben in Markdown keine Entsprechung und bleiben deshalb als Inline-HTML erhalten.

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. Öffne im File-Menü Import Markdown…. 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).

    Datei und URL landen zuerst im Textfeld, sodass du vor dem Übernehmen noch einen Blick darauf werfen kannst.

  2. Bestätige mit Import. Der bestehende Editor-Inhalt wird ersetzt — vorher legt der Editor automatisch einen Snapshot an.

  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; das Frontmatter steht dann wieder als ----Block am Anfang) oder als HTML (Beispiel 4).

Zwei Abkürzungen: Eine .md-Datei kannst du auch direkt über File → Open file (HTML / Markdown)… öffnen oder in den Editor ziehen. Und kopierst du Markdown als Klartext (etwa aus einem Chat oder Terminal) und fügst es mit Strg+V ein, formatiert der Editor es sofort — Strg+Umschalt+V fügt es unverändert ein.

Beispiel 3: Tabelle und Code-Block einfügen

Strukturierte Inhalte gehören zu fast jeder Doku.

  1. Tabelle: Setz den Cursor in eine leere Zeile, tipp /table und drück Enter — oder öffne in der Insert-Gruppe das Tabellen-Menü und wähl Insert table. Beides legt eine 3×3-Tabelle mit Kopfzeile an. Sobald der Cursor in der Tabelle steht, erscheint darüber eine kleine Leiste: Zeilen oberhalb/unterhalb und Spalten links/rechts einfügen oder löschen, die Kopfzeile umschalten, Zellen verbinden oder teilen, die Tabelle löschen. Dieselben Befehle stehen im Tabellen-Menü der Toolbar. Spaltenbreiten lassen sich ziehen.
  2. Code-Block: Tipp am Zeilenanfang ``` (Live-Regel), /code im Slash-Menü 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. Öffne im File-Menü Load from URL…. Trag im Dialog Insert HTML from URL eine absolute http(s)-Adresse ein. Wähl, ob die Seite das aktuelle Dokument ersetzen (Replace the current document) oder an der Cursor-Position eingefügt werden soll (Insert at the cursor position), 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; alles, was der Editor nicht darstellen kann (Skripte, Klassen, eigene Styles), fällt weg. Beim Ersetzen sichert ein automatischer Snapshot den vorherigen Stand.
  3. Überarbeite den Inhalt im Editor — kürzen, umformatieren, eigene Absätze ergänzen.
  4. Speichere über File → Save as HTML eine eigenständige HTML-Datei mit eingebettetem hellem Stylesheet, hervorgehobenem Code und gerenderten Formeln — fertig zum Weitergeben oder Hochladen. Der Dateiname und der <title> stammen aus der ersten Überschrift.

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 ($$…$$) — oder tipp /math. Im Dialog Math (LaTeX) gibst du den Ausdruck ein, z. B. E = mc^2 oder \frac{a}{b} + \sqrt{x^2}; die Vorschau darunter rendert ihn mit KaTeX, während du tippst. Apply oder Strg+Enter fügt die Formel ein. Ein Klick auf die fertige Formel öffnet sie wieder im selben Dialog.
  2. Ausklappbarer Abschnitt: Klick auf Collapsible section (oder /coll im Slash-Menü). Es entsteht ein aufgeklappter <details>-Block, der Cursor steht schon im Titel (Summary). Tipp den Titel, dann darunter den Inhalt.
  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. Öffne im File-Menü Export JSON (TipTap)…. Du bekommst das native TipTap-Dokument als formatiertes JSON, kopierbar (Copy) oder als .json-Datei speicherbar (Save .json file).
  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 File → Import JSON (TipTap)… (eingefügt oder per Load .json file) 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.

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 — oder, solange du im selben Browser bleibst, ein Snapshot (Beispiel 7).

Beispiel 7: Zwischenstände mit Snapshots sichern und zurückholen

Du baust einen Text grundlegend um und willst jederzeit zur letzten guten Fassung zurück, ohne Dateien zu jonglieren.

  1. Öffne File → Snapshots…, gib einen Namen ein (z. B. „Fassung vor dem Kürzen") und klick Save current document.
  2. Arbeite weiter. Öffnest du zwischendurch eine Datei, importierst Markdown oder JSON, lädst eine URL im Ersetzen-Modus oder leerst das Dokument, legt der Editor vorher automatisch einen Snapshot an — in der Liste mit „automatic" gekennzeichnet.
  3. Willst du zurück, öffne wieder Snapshots… und klick beim gewünschten Eintrag auf Restore. Den aktuellen Stand sichert der Editor vor dem Wiederherstellen ebenfalls automatisch, und Strg+Z macht das Wiederherstellen rückgängig.
  4. Nicht mehr benötigte Snapshots entfernst du mit dem Papierkorb-Button. Es werden höchstens 20 gehalten; darüber fallen zuerst die ältesten automatischen weg.

Snapshots liegen im Browser-Speicher. Für ein Backup außerhalb des Browsers exportierst du zusätzlich als JSON, Markdown oder HTML.

Beispiel 8: Den HTML-Quelltext direkt nachbessern

Manchmal ist eine Kleinigkeit im Markup schneller getippt als zusammengeklickt — etwa eine Liste von Links, die du aus einem anderen Dokument kopiert hast.

  1. Öffne File → Edit HTML source…. Der Editor zeigt das HTML des Dokuments eingerückt in einem Code-Editor mit Syntax-Hervorhebung.

  2. Ändere oder ergänze das Markup, z. B. einen weiteren Listenpunkt:

    <ul>
  <li><a href="https://www.jpkc.com/tools/md/">Markdown Editor</a></li>
  <li><a href="https://www.jpkc.com/tools/source/">HTML/Markdown-Konverter</a></li>
</ul>

  3. Klick Apply. Der Editor übernimmt das HTML in sein Dokumentmodell; Markup, das er nicht kennt (Skripte, Klassen, eigene Styles), fällt dabei weg. Mit Strg+Z nimmst du die Änderung zurück.

Brauchst du das HTML nur als Text, reicht Copy im selben Dialog oder File → Copy as HTML.

Noch tiefer: die Übersicht zum großen Bild, das Manual für jede Funktion im Detail und die Tipps & Tricks für Kniffe und Stolperfallen. Ausprobieren kannst du alles direkt im Tool.