Zum Hauptinhalt springen

Anleitungen

Einbettung

Block-Referenz

Clepit liefert 12 integrierte Blocktypen. Jeder Block hat eine JSON-Struktur, einen Renderer und einen programmatischen Einfügepfad über editor.blocks.insert.

Alle Blöcke teilen beim Serialisieren dieselbe Hülle: id, type, data und einen optionalen tunes-Datensatz.

Die Blockstruktur

Jeder Block wird in dieselbe JSON-Hülle serialisiert. Die id wird vom Editor zugewiesen und kann beim programmgesteuerten Aufbau von Daten weggelassen werden.

JSON
{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Hello <b>world</b>" },
  "tunes": {}
}

alert

Hervorgehobene Hinweisbox mit 4 Varianten.

FeldTypErforderlichBeschreibung
htmlstringJaHTML-Inhalt der Benachrichtigungsmeldung. Inline-Tool-Markup wird unterstützt.
variant'error' | 'info' | 'success' | 'warning'JaVisueller Stil der Benachrichtigung. Einer von: error, info, success, warning.
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

Audioblock. Wird über den audioUploader-Callback bei Editor.create verarbeitet.

FeldTypErforderlichBeschreibung
urlstringJaURL der einzubettenden Audiodatei.
captionstringNeinNur-Text-Beschriftung, die unterhalb des Players angezeigt wird.
altstringNeinBarrierefreie Beschriftung für das Audioelement.
alignment'center' | 'left' | 'right'NeinHorizontale Ausrichtung des Players. Einer von: center, left, right.
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

Interaktive Checkbox-Liste mit Markierungsstatus pro Element.

FeldTypErforderlichBeschreibung
itemsChecklistItem[]JaArray von Checklisten-Elementen, jedes mit einem Text und einem ausgewählten Zustand.
items[].textstringJaHTML-Inhalt der Elementbeschriftung.
items[].checkedbooleanJaOb das Kontrollkästchen aktiviert ist.
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

Codeblock mit Syntaxhervorhebung. 50 Sprachen werden unterstützt, darunter typescript, python, rust, go, ruby, swift und kotlin.

FeldTypErforderlichBeschreibung
codestringJaDer anzuzeigende rohe Code-String.
languageCodeLanguageNeinSprache für die Syntaxhervorhebung. Standard ist typescript.
themeCodeThemeNeinFarbthema des Editors. Standard ist github-dark.
showCopybooleanNeinEine Kopierschaltfläche in der gerenderten Ausgabe anzeigen.
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

Visueller Trenner zwischen Abschnitten.

FeldTypErforderlichBeschreibung
variant'line' | 'stars'JaVisueller Stil des Trennzeichens. Einer von: line, stars.
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

Überschriften der obersten Ebene und Abschnittsüberschriften (h1 bis h6). Inline-Tools funktionieren innerhalb der html-Nutzlast.

FeldTypErforderlichBeschreibung
htmlstringJaHTML-Inhalt der Überschrift. Inline-Tool-Markup wird unterstützt.
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'NeinÜberschriftenebene. Einer von: h1, h2, h3, h4, h5, h6. Standard ist h1.
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

Bildblock mit Beschriftung und Alt-Text. Wird über den imageUploader-Callback bei Editor.create verarbeitet.

FeldTypErforderlichBeschreibung
urlstringJaURL des einzubettenden Bildes.
captionstringNeinNur-Text-Beschriftung, die unterhalb des Bildes angezeigt wird.
altstringNeinAlt-Text für das Bildelement.
alignment'center' | 'left' | 'right'NeinHorizontale Ausrichtung des Bildes. Einer von: center, left, right.
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

Geordnete oder ungeordnete Liste. Jedes Element ist html.

FeldTypErforderlichBeschreibung
type'ordered' | 'unordered'JaListentyp. Einer von: ordered, unordered.
itemsstring[]JaArray von HTML-Strings, einer pro Listenelement.
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

Rich-Text-Absatz. Akzeptiert Inline-Tool-Markup wie bold, italic, code, link, marker und tooltip.

FeldTypErforderlichBeschreibung
htmlstringJaHTML-Inhalt des Absatzes. Inline-Tool-Markup wird unterstützt.
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Blockzitat mit optionaler Autorenangabe.

FeldTypErforderlichBeschreibung
htmlstringJaHTML-Inhalt des Zitatinhalts. Inline-Tool-Markup wird unterstützt.
authorstringNeinNur-Text- oder HTML-Zuschreibung, die unterhalb des Zitats angezeigt wird.
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

Datenraster. Die erste Zeile kann als Kopfzeile verwendet werden; jede Zelle ist html.

FeldTypErforderlichBeschreibung
datastring[][]JaZweidimensionales Array von HTML-Zell-Strings. Die erste Zeile ist die Kopfzeile.
captionstringNeinNur-Text- oder HTML-Beschriftung, die unterhalb der Tabelle angezeigt wird.
showDownloadbooleanNeinEine Download-Schaltfläche in der gerenderten Ausgabe anzeigen.
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

Videoblock. Wird über den videoUploader-Callback bei Editor.create verarbeitet.

FeldTypErforderlichBeschreibung
urlstringJaURL der Videodatei oder YouTube/Vimeo-Einbettungslink.
captionstringNeinNur-Text-Beschriftung, die unterhalb des Players angezeigt wird.
altstringNeinBarrierefreie Beschriftung für das Videoelement.
alignment'center' | 'left' | 'right'NeinHorizontale Ausrichtung des Players. Einer von: center, left, right.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}