Zum Hauptinhalt springen

Block-Editor

Die 14 Blocktypen

  • Absatz, Überschriften H1-H4, Zitat
  • Liste (ungeordnet/nummeriert)
  • Bild, Button, Trennlinie, Code
  • Video/Medien-Link (automatische Einbettung, siehe unten)
  • Zwei Spalten
  • Baustein einfügen (wiederverwendbare Bausteine, siehe eigene Seite)

Automatische Video-Einbettung

Eine Video/Medien-URL, die für sich allein in einem eigenen Absatz steht, wird beim Anzeigen automatisch eingebettet - unterstützt werden YouTube, Vimeo, Spotify, CodePen, Dailymotion, Loom und GitHub Gist. Bewusst OHNE Live-Abfrage einer externen oEmbed-API (Sicherheits- und Geschwindigkeitsgründe) - stattdessen über die stabilen, seit Jahren unveränderten Embed-URL-Muster der jeweiligen Anbieter direkt.

Wie das Speichern technisch funktioniert

Der Editor arbeitet intern mit einer Block-JSON-Struktur, serialisiert beim Speichern zu echtem HTML (z.B. wird ein Absatz-Block zu <p>...</p>). Bereits vorhandenes HTML wird beim erneuten Öffnen wieder in einzelne Blöcke zurückgeparst - funktioniert zuverlässig für Standard-HTML, kann bei sehr exotischem, von Hand geschriebenem HTML an seine Grenzen kommen.

Der Zwei-Spalten-Block hat zwei unabhängig bearbeitbare Felder statt nur eines. Der interne Speicher-Mechanismus musste dafür extra angepasst werden (ein data-prop-Attribut sagt beim Speichern, welches der beiden Felder gemeint ist) - ohne das wäre die Eingabe in einer der beiden Spalten beim Speichern verloren gegangen.

— Ein echter Stolperstein, den wir selbst gefunden haben

Barrierefreiheit

Jeder Block-Button hat eine eindeutige Beschriftung, die Reihenfolge-Buttons (hoch/runter) sind per Tastatur bedienbar, keine reine Maus-Drag&Drop-Abhängigkeit.