Zum Hauptinhalt springen

Anleitungen

Einbettung

Kernkonzepte

Das Block-Modell

Das Herzstück von EditorData ist das blocks-Array: Block-Objekte, die die Reihenfolge erhalten. Jeder Block trägt seinen Typ, typspezifische Daten und optionale tunes-Metadaten.

FeldTypBeschreibung
idstring | undefinedOptionaler eindeutiger Bezeichner, wird beim Erstellen vom Editor vergeben.
typeBlockToolTypeWörtlicher Schlüssel, der den Block mit seinem Schema, seiner Eingabekomponente und seinem Renderer verknüpft.
dataobjectTypspezifisches Datenobjekt: die Struktur unterscheidet sich je nach Blocktyp.
tunesBlockTunes | undefinedOptionales typübergreifendes Tune-Metadaten-Wörterbuch. Der Schlüssel ist der Tune-Name, der Wert sind freie Daten.
JSON
{
  "time": 1745000000000,
  "version": "1.0.0",
  "blocks": [
    {
      "id": "abc123",
      "type": "header",
      "data": { "html": "Hello world", "level": "h1" }
    },
    {
      "id": "def456",
      "type": "paragraph",
      "data": { "html": "This is a <b>rich</b> paragraph." }
    }
  ]
}

Block-Tools vs. Inline-Tools

Block-Tools erstellen Plätze der obersten Ebene direkt innerhalb von EditorData. Inline-Tools schmücken Text innerhalb der html-Nutzlast, die ein Block enthält. Die beiden Ebenen sind völlig getrennt: sie können nicht füreinander eingesetzt werden.

JSON-First-Ausgabe

Der Editor persistiert niemals HTML. Wenn Sie editor.data.extract() aufrufen, erhalten Sie reines EditorData-JSON: vollständig einschließlich Medien-URLs. Dieses JSON kann in einer Datenbank gespeichert, personalisiert oder in andere Formate konvertiert werden.

TypeScript
import { Editor } from '@clepit/core';

const editor = Editor.create({ containerId: 'editor' });

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [ ... ]
// }

Editor vs. Renderer

Editor nutzt das Browser-DOM, damit ein Nutzer Inhalte bearbeiten kann (nur im Browser). Renderer übernimmt zuvor gespeicherte EditorData und rendert sie als HTML (kann im Browser oder via SSR ausgeführt werden).

Block-Tunes

Tunes sind ein typunabhängiger Metadaten-Slot für jeden Blocktyp. Der Schlüssel ist der vom System oder einem Plugin gesetzte Tune-Name, und der Wert ist auf BlockTuneData typisiert: eine beliebige Kombination aus string, number, boolean oder null. Tunes können Semantik hinzufügen, ohne die grundlegende Datenstruktur zu verändern.

JSON
{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Some text." },
  "tunes": {
    "textAlign": { "alignment": "center" },
    "visibility": { "hidden": false }
  }
}