JPKCom DB

Markdown Editor — Manual

Funktionsreferenz des Markdown-Editors: jede Schaltfläche, der volle GFM- und Erweiterungs-Umfang, Architektur, Export und alle Tastaturkürzel.

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

Dieses Manual beschreibt den Markdown Editor vollständig: jede Schaltfläche der Werkzeugleiste, die unterstützte Markdown-Syntax in voller Breite, wie der Editor speichert, wie der Export funktioniert und welche Grenzen gelten. Die Oberfläche des Tools ist auf Englisch — die Button- und Menü-Bezeichnungen werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Aufbau der Oberfläche

Der Editor besteht aus drei Bereichen:

  1. Die zweizeilige Werkzeugleiste ganz oben — Zeile 1 mit Datei-, Ansichts- und Export-Aktionen, Zeile 2 mit den eigentlichen Markdown-Formatierungen.
  2. Die Editor-Spalte (links, Überschrift „Markdown") — hier tippst du. Unten rechts in ihrer Kopfzeile zeigt ein kleines Badge den localStorage-Status: grün, wenn der aktuelle Stand gesichert ist.
  3. Die Vorschau-Spalte (rechts, Überschrift „Preview") — das gerenderte Ergebnis, umschaltbar zwischen den Lesethemen Dark, Light und Sepia.

Beide Spalten scrollen standardmäßig synchron. Auf schmalen Bildschirmen werden die Spalten gestapelt, und einige Schaltflächen (Zwischenablage, Vollbild) blenden sich aus.

GitHub Flavored Markdown und Erweiterungen

Gerendert wird mit markdown-it, konfiguriert mit eingeschaltetem linkify (nackte URLs werden zu Links), breaks (ein einfacher Zeilenumbruch wird zum <br>), typographer (typografische Ersetzungen) und html (eingebettetes HTML wird gerendert). Darauf sitzt eine ganze Reihe Plugins. Der unterstützte Umfang:

GFM-Kern

  • Überschriften # bis ######
  • Fett **text**, kursiv *text*, durchgestrichen ~~text~~
  • Inline-Code `code` und Code-Blöcke mit drei Backticks und optionaler Sprachangabe — dargestellt mit Syntax-Highlighting über highlight.js
  • Listen — ungeordnet (-), geordnet (1.) und Task-Listen (- [x] / - [ ])
  • Tabellen im Pipe-Format | A | B |
  • Blockzitate > …, horizontale Linien ---
  • Links [text](url), Bilder ![alt](url) und automatisch verlinkte nackte URLs

Erweiterungen über GFM hinaus

  • Fußnoten — Text[^1] mit [^1]: Notentext
  • Definitionslisten — eine Zeile Begriff, darunter : Definition
  • Tiefstellung ~text~ (z. B. H~2~O) und Hochstellung ^text^ (z. B. x^2^)
  • Markierung ==text== (<mark>) und Einfügung ++text++ (<ins>)
  • Abkürzungen — *[HTML]: Hyper Text Markup Language erzeugt ein <abbr> mit Tooltip
  • Emoji-Shortcodes — :smile:, :heart:, :rocket: …
  • Mathematik mit KaTeX — inline $E = mc^2$, als Block $$\sum_{i=1}^{n} x_i$$ (Dollar-Delimiter)
  • Mermaid-Diagramme — ein Code-Block mit Sprache mermaid wird als Diagramm gerendert (Flowchart, Sequenz, Klasse, State, ER, Gantt, Pie)
  • Typographer — gerade Anführungszeichen werden zu typografischen, -- zu Halbgeviert-, --- zu Geviertstrich, ... zur Ellipse
  • Roh-HTML — eingebettete HTML-Tags werden in der Vorschau gerendert

Das eingebaute Markdown Cheat Sheet (im Tools-Menü …) listet diese Syntax kompakt mit Beispielen.

Werkzeugleiste, Zeile 1 — Datei und Ansicht

File operations — New / Open / Save / Load from URL / Clear

  • New document — leert den Editor für ein neues Dokument.
  • Open .md file — öffnet eine lokale Datei (.md, .markdown, .txt) per Dateidialog.
  • Save as .md — speichert den aktuellen Editor-Inhalt als Markdown-Datei (auch über Strg+S).
  • Load Markdown from URL — öffnet einen Dialog, in den du eine URL einträgst; der Inhalt dieser URL wird serverseitig geholt und ersetzt den aktuellen Editor-Inhalt. Mechanik und Grenzen siehe Architektur.
  • Clear editor — verwirft den Inhalt.

Templates — Dokumentvorlagen

Ein Menü mit sechs fertigen Grundgerüsten, die den Editor füllen: README.md, Changelog, Blog Post, Meeting Notes, API Documentation und License (MIT). Gut als Startpunkt, statt mit einer leeren Seite zu beginnen.

Clipboard — Cut / Copy / Paste

Ausschneiden, Kopieren und Einfügen (nur auf größeren Bildschirmen sichtbar) — die üblichen Zwischenablage-Aktionen auf den Editor-Inhalt.

Undo / Redo

Rückgängig (Strg+Z) und Wiederholen (Strg+Y) über die volle ACE-Historie.

Font size — Schriftgröße

Zwei Schaltflächen verkleinern und vergrößern die Schrift im Editor (auch in den Settings als Zahlenwert einstellbar).

View options — Ansicht

  • Editor + Preview — geteilte Ansicht (Standard).
  • Editor only — nur der Editor.
  • Preview only — nur die Vorschau.
  • Table of Contents — blendet ein Inhaltsverzeichnis-Panel ein, das aus den Überschriften deines Dokuments aufgebaut wird.
  • Toggle line wrap — schaltet den Zeilenumbruch im Editor um.
  • Toggle synchronized scrolling — schaltet das synchrone Scrollen von Editor und Vorschau ein/aus (Standard: ein).
  • Toggle fullscreen — Vollbildmodus (mit Escape verlassen).

Tools-Menü (…)

  • Go to Line (Strg+G), Find (Strg+F), Replace (Strg+H) — Navigation und Suche.
  • Print Markdown — druckt den rohen Markdown-Quelltext.
  • Markdown Cheat Sheet — das eingebaute Syntax-Nachschlagewerk.
  • Keyboard Shortcuts — die Übersicht aller Tastaturkürzel.
  • Settings — die Editor-Einstellungen (siehe Einstellungen).

Preview & Export

  • Preview (Fullscreen) — öffnet die gerenderte Vorschau bildschirmfüllend in einem Modal, mit eigenen Buttons für Copy, Save, PDF und Print.
  • Das angehängte Export-Menü bietet: Copy HTML (gerendertes HTML in die Zwischenablage), Save as HTML (vollständiges, eigenständiges HTML-Dokument inkl. eingebetteter Stile), Save as PDF und Print. Details unter Export und Druck.

Werkzeugleiste, Zeile 2 — Markdown-Formatierung

Text formatting

  • Headings — Menü für Überschrift 1 bis 6.
  • Bold (**text**), Italic (*text*), Strikethrough (~~text~~).
  • Subscript (~text~), Superscript (^text^).
  • Highlight (==text==), Inserted (++text++).
  • Inline code (`code`).

Block elements

  • Lists — Menü für Unordered List, Ordered List, Task List und Definition List.
  • Blockquote (> quote), Code block, Insert table, Horizontal rule (---).
  • Insert Mermaid diagram — fügt ein Mermaid-Grundgerüst ein.

References & extras

  • Insert link ([text](url)), Insert image (![alt](url)).
  • Footnote ([^1]), Emoji (:smile:), Abbreviation.
  • Math (KaTeX) — Menü für Math Inline ($…$) und Math Block ($$…$$).

Architektur, Speicherung und Datenschutz

Der Editor ist im Kern eine reine Client-Anwendung: Rendern, automatisches Speichern und Export passieren ausschließlich in deinem Browser. Dein Dokument verlässt deinen Rechner nicht — es sei denn, du speicherst oder exportierst es bewusst als Datei.

Automatisches Speichern legt den aktuellen Inhalt unter dem Schlüssel md_editor_content im localStorage deines Browsers ab; die Editor-Einstellungen liegen unter md_editor_settings. Beides bleibt zwischen Sitzungen erhalten und ist nach einem Reload wieder da. Das Status-Badge in der Editor-Kopfzeile zeigt grün, wenn der Stand gesichert wurde.

Die einzige Funktion mit Serverkontakt ist Load Markdown from URL. Der Ablauf:

  1. Das Tool-JavaScript holt zunächst über einen internen Token-Endpunkt (p-api.php) ein frisches, zeitlich begrenztes Token-Paar.
  2. Damit ruft es den Fetch-Proxy (p.php) auf, der die von dir angegebene URL serverseitig per cURL lädt und den rohen Inhalt (typisch text/markdown oder text/plain) zurückgibt.

Diese beiden Endpunkte sind kein öffentliches API, das du selbst aufrufen kannst — sie sind durch Token, Referer-Prüfung und tagesrotierende Geheimnisse gegen Fremdnutzung gehärtet und werden ausschließlich vom Tool selbst verwendet. Datenschutz-relevant ist vor allem: An den Server geht beim URL-Laden nur die Ziel-URL, niemals der Text, den du im Editor schreibst. Die Zielseite sieht einen Request vom JPKCom-Server, nicht deine IP-Adresse. Es gelten serverseitige Grenzen:

  • SSRF-Schutz: private, lokale und interne IP-Adressen werden blockiert; nur HTTP/HTTPS.
  • Größenlimit: maximal 950 KB Antwort-Body.
  • Timeout: etwa 10 s pro Abruf.

Expert Mode (optional)

Ist der optionale LocalProxy (Expert Mode) aktiv, läuft das URL-Laden stattdessen über einen selbst betriebenen lokalen Proxy auf http://127.0.0.1:<port> — dann geht die Ziel-URL gar nicht erst an den JPKCom-Server. Die Einrichtung ist fortgeschritten und für den normalen Betrieb nicht nötig.

Export und Druck

Alle Exporte entstehen lokal im Browser aus der gerenderten Vorschau:

  • Copy HTML — kopiert das gerenderte HTML in die Zwischenablage.
  • Save as HTML — speichert ein vollständiges, eigenständiges HTML-Dokument; eingebettet sind die nötigen Stile (KaTeX-CSS, ein helles highlight.js-Theme, Mermaid-Layout), sodass die Datei für sich allein korrekt aussieht.
  • Save as PDF — rendert die Vorschau über html2pdf.js/html2canvas zu einer PDF-Datei; Code-Blöcke und Mermaid-Diagramme werden für den Druck in ein helles Thema umgeschaltet.
  • Print / Print Markdown — druckt die gerenderte Vorschau bzw. den rohen Markdown-Quelltext.

Für den HTML- und PDF-Export gilt: Mermaid-Diagramme werden vor dem Export im hellen Thema neu gerendert, damit sie auf weißem Grund lesbar sind.

Einstellungen

Im Settings-Dialog stellst du den Editor ein; die Werte werden im localStorage gesichert:

  • Font Size — Schriftgröße in Pixeln (8–32, Standard 15).
  • Tab Size — 2, 4 (Standard) oder 8 Leerzeichen.
  • Theme — ACE-Editor-Theme: Dracula (Standard) oder Monokai (dunkel), GitHub oder Solarized (Sepia) (hell).
  • Word wrap — Zeilenumbruch (Standard: an).
  • Show invisible characters — unsichtbare Zeichen anzeigen.
  • Show indent guides — Einrückungslinien (Standard: an).
  • Show line numbers — Zeilennummern (Standard: an).
  • Highlight active line — aktive Zeile hervorheben (Standard: an).
  • Reset to Defaults — alle Werte zurücksetzen.

Tastaturkürzel

Der ACE-Editor bringt ein volles Set mit. Die wichtigsten:

  • Formatierung: Strg+B fett, Strg+I kursiv.
  • Datei: Strg+S als .md speichern, Strg+O Datei öffnen.
  • Suche & Ersetzen: Strg+F finden, Strg+H ersetzen, F3 weiter, Shift+F3 zurück.
  • Bearbeiten: Strg+Z rückgängig, Strg+Y wiederholen, Strg+D Zeile duplizieren, Strg+Shift+K Zeile löschen, Tab/Shift+Tab ein-/ausrücken, Alt+↑/↓ Zeile verschieben.
  • Navigation: Strg+G zu Zeile springen, Strg+Home/Strg+End an Anfang/Ende, Alt+←/→ wortweise.
  • Ansicht: Escape verlässt den Vollbildmodus.

Die vollständige Liste steht im Keyboard Shortcuts-Dialog (Tools-Menü).

Grenzen

  • Der Editor rendert nur, was markdown-it samt der geladenen Plugins kann — exotische Markdown-Dialekte oder GitHub-spezifische Features wie Alerts/Callouts sind nicht abgedeckt.
  • Wegen breaks: true wird jeder einfache Zeilenumbruch zum <br> — das weicht von striktem CommonMark/GFM ab (siehe Tipps & Tricks).
  • Wegen html: true wird eingebettetes HTML in der Vorschau gerendert; das ist gewollt, aber bedenke es beim Einfügen fremder Inhalte.
  • Load Markdown from URL ist auf öffentliche HTTP/HTTPS-Adressen begrenzt (kein localhost/Intranet), maximal 950 KB, ~10 s Timeout.
  • Die automatische Sicherung liegt nur in diesem Browser; ein anderer Browser oder ein gelöschter localStorage kennt deinen Text nicht.

Für den Einstieg und die Zielgruppen siehe die Übersichtsseite. Konkrete Abläufe zeigen die Beispiele, strategische Kniffe die Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.