Konfiguration
EditorConfig und RendererConfig sind die Einstiegspunkte für jede Anpassung. Übergeben Sie eines davon an Editor.create() bzw. Renderer.render(). Nur containerId (und data für den Renderer) sind erforderlich; alle anderen Optionen haben sichere Standardwerte.
EditorConfig
Übergeben Sie EditorConfig als einziges Argument an Editor.create(). Die erforderliche containerId muss mit der Id eines vorhandenen DOM-Elements übereinstimmen.
| Option | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
| containerId | string | Ja | ID des DOM-Elements, das den Editor beherbergt. Muss im DOM vorhanden sein, bevor Editor.create() aufgerufen wird. |
| maxHeight | number | Nein | Maximale Höhe des Editors in Pixeln. Auf 0 (Standard) setzen für keine Höhenbegrenzung. |
| minHeight | number | Nein | Mindesthöhe des Editors in Pixeln. Standard ist 300. |
| onChange | (data: EditorData) => void | Nein | Rückruf, der bei jeder Dokumentänderung ausgelöst wird. Empfängt den vollständigen EditorData-Snapshot. |
| onReady | () => void | Nein | Rückruf, der ausgelöst wird, wenn der Editor vollständig initialisiert ist und API-Aufrufe entgegennehmen kann. |
| placeholder | string | Nein | Platzhaltertext, der angezeigt wird, wenn der Editor leer ist. Standard ist 'Start writing...'. |
| initialData | EditorData | Nein | Vorausgefüllte EditorData, die beim Mounten des Editors geladen wird. |
| initialView | 'edit' | 'preview' | 'json' | Nein | Startansichtsmodus. Einer von: edit, preview, json. Standard ist 'edit'. |
| allowJsonViewEditing | boolean | Nein | Wenn true, ist die JSON-Ansicht bearbeitbar und Änderungen werden ins Dokument zurückgegeben. Standard ist false. |
| margins | BlockMargins | Nein | Globaler oberer und unterer Rand (in Pixeln), der auf jeden Block angewendet wird. Block-spezifische Konfigurationen haben Vorrang. |
| styles | EditorStyles | Nein | EditorStyles-Objekt für eine fein abgestufte CSS-Anpassung des Editor-Chroms (Symbolleisten, Dialoge, Steuerelemente). |
| classNames | EditorClassNames | Nein | EditorClassNames-Objekt zum Anhängen von CSS-Klassennamen an Editor-Chrome-Elemente. |
| imageUploader | UploadFunction | Nein | Asynchrone Funktion, die eine Bilddatei hochlädt und eine öffentliche URL-Zeichenfolge zurückgibt. |
| audioUploader | UploadFunction | Nein | Asynchrone Funktion, die eine Audiodatei hochlädt und eine öffentliche URL-Zeichenfolge zurückgibt. |
| videoUploader | UploadFunction | Nein | Asynchrone Funktion, die eine Videodatei hochlädt und eine öffentliche URL-Zeichenfolge zurückgibt. |
| theme | 'auto' | 'light' | 'dark' | Nein | Farbschema. Einer von: auto (folgt dem System), light, dark. Standard ist auto. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Nein | Pro-Modus-Token-Überschreibungen. Stellen Sie light- und/oder dark-Token-Maps bereit, um Farben anzupassen, ohne das vollständige Theme zu ersetzen. |
TypeScript
import { Editor } from '@clepit/core';
const editor = Editor.create({
containerId: 'editor',
minHeight: 400,
placeholder: 'Start writing...',
theme: 'auto',
onChange: data => console.log(data),
onReady: () => console.log('Editor ready'),
imageUploader: async file => {
const form = new FormData();
form.append('file', file);
const res = await fetch('/api/upload', { body: form, method: 'POST' });
const { url } = await res.json();
return url;
},
});RendererConfig
Übergeben Sie RendererConfig als einziges Argument an Renderer.render(). Sowohl containerId als auch data sind erforderlich.
| Option | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
| containerId | string | Ja | ID des DOM-Elements, in das die gerenderte Ausgabe injiziert wird. |
| data | EditorData | Ja | Das zu rendernde EditorData-Dokument. Erforderlich. |
| margins | BlockMargins | Nein | Globaler oberer und unterer Rand (in Pixeln), der auf jeden gerenderten Block angewendet wird. |
| styles | BlockStyles | Nein | BlockStyles-Map für die CSS-Anpassung pro Blocktyp der gerenderten Ausgabe. |
| classNames | BlockClassNames | Nein | BlockClassNames-Map für CSS-Klassennamen pro Blocktyp der gerenderten Ausgabe. |
| editorClassNames | EditorClassNames | Nein | EditorClassNames, die an Blöcke weitergegeben werden, die interaktive Komponenten rendern (z.B. Tooltip-Klassennamen für Absätze). |
| configs | Partial<BlockTypeOutputConfigs> | Nein | Partielle Karte von OutputConfig-Objekten pro Block. Jeder Eintrag kann Ränder auf Blockebene und Tooltip-Klassennamen festlegen. |
| theme | 'auto' | 'light' | 'dark' | Nein | Farbschema. Einer von: auto, light, dark. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Nein | Pro-Modus-Token-Überschreibungen für die gerenderte Ausgabe. |
TypeScript
import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';
const data: EditorData = await fetch('/api/content/123').then(r => r.json());
Renderer.render({
containerId: 'output',
data,
theme: 'auto',
margins: { bottom: 16, top: 16 },
});Styling auf Blockebene
Sowohl EditorConfig als auch RendererConfig akzeptieren styles, classNames und configs, die nach Blocktyp geschlüsselt sind. Verwenden Sie diese für gezielte Überschreibungen; die vollständige Token-Referenz finden Sie auf der Themes-Seite.
TypeScript
import { Editor, Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames, EditorStyles } from '@clepit/core';
const editorStyles: EditorStyles = {
blockToolbar: { container: { borderRadius: '8px' } },
};
const blockStyles: BlockStyles = {
header: { h1: { fontFamily: 'Georgia, serif' } },
paragraph: { lineHeight: '1.75' },
table: { cell: { padding: '8px 12px' } },
};
const blockClassNames: BlockClassNames = {
paragraph: 'prose-paragraph',
header: { h1: 'prose-h1', h2: 'prose-h2' },
alert: { info: 'alert-info', error: 'alert-error' },
};
Editor.create({
containerId: 'editor',
styles: editorStyles,
});
Renderer.render({
containerId: 'output',
data,
styles: blockStyles,
classNames: blockClassNames,
});