Seadistamine
EditorConfig ja RendererConfig on kõigi kohanduste sisenemispunktid. Edasta need vastavalt Editor.create() või Renderer.render() meetodile. Ainult containerId (ja andmete jaoks data) on nõutavad, kõigil muudel valikutel on turvalised vaikeväärtused.
EditorConfig
Edasta EditorConfig ainus argument Editor.create() meetodile. Nõutav containerId peab vastama olemasolevale DOM-elemendi id-le.
| Valik | Tüüp | Nõutav | Kirjeldus |
|---|---|---|---|
| containerId | string | Jah | DOM-elemendi ID, mis majutab redaktorit. Peab eksisteerima DOM-is enne Editor.create() kutsumist. |
| maxHeight | number | Ei | Redaktori maksimaalne kõrgus pikslites. Määra 0 (vaikimisi) kõrguspiirangu puudumiseks. |
| minHeight | number | Ei | Redaktori minimaalne kõrgus pikslites. Vaikimisi 300. |
| onChange | (data: EditorData) => void | Ei | Tagasihelistamine, mis käivitatakse iga kord, kui dokument muutub. Saab täieliku EditorData hetktõmmise. |
| onReady | () => void | Ei | Tagasihelistamine, mis käivitatakse, kui redaktor on täielikult lähtestatud ja valmis API-kutseid vastu võtma. |
| placeholder | string | Ei | Kohatäite tekst, mis kuvatakse, kui redaktor on tühi. Vaikimisi 'Start writing...'. |
| initialData | EditorData | Ei | Eelnevalt täidetud EditorData, mida laaditakse redaktori monteerimisel. |
| initialView | 'edit' | 'preview' | 'json' | Ei | Algusvaatem. Üks järgmistest: edit, preview, json. Vaikimisi 'edit'. |
| allowJsonViewEditing | boolean | Ei | Kui true, on JSON-vaade redigeeritav ja muudatused kanduvad tagasi dokumenti. Vaikimisi false. |
| margins | BlockMargins | Ei | Globaalne ülemine ja alumine veerised (pikslites), mida rakendatakse igale plokile. Plokitaseme seaded on ülimuslikud. |
| styles | EditorStyles | Ei | EditorStyles objekt redaktori kroomi (tööriistaribad, dialoogid, juhtelemendid) peene CSS-kohanduse jaoks. |
| classNames | EditorClassNames | Ei | EditorClassNames objekt CSS-klassinimede lisamiseks redaktori kroomi elementidele. |
| imageUploader | UploadFunction | Ei | Asünkroonne funktsioon, mis laadib üles pildifaili ja tagastab avaliku URL-stringi. |
| audioUploader | UploadFunction | Ei | Asünkroonne funktsioon, mis laadib üles helifaili ja tagastab avaliku URL-stringi. |
| videoUploader | UploadFunction | Ei | Asünkroonne funktsioon, mis laadib üles videofaili ja tagastab avaliku URL-stringi. |
| theme | 'auto' | 'light' | 'dark' | Ei | Värviskeem. Üks järgmistest: auto (järgib süsteemi), light, dark. Vaikimisi auto. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Ei | Režiimipõhised tokeni alistamised. Esita light ja/või dark tokenkaardid värvide kohandamiseks ilma täielikku teemat asendamata. |
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
Edasta RendererConfig ainus argument Renderer.render() meetodile. Nii containerId kui ka data on nõutavad.
| Valik | Tüüp | Nõutav | Kirjeldus |
|---|---|---|---|
| containerId | string | Jah | DOM-elemendi ID, kuhu renderdatud väljund süstitakse. |
| data | EditorData | Jah | Renderdatav EditorData dokument. Nõutav. |
| margins | BlockMargins | Ei | Globaalne ülemine ja alumine veerised (pikslites), mida rakendatakse igale renderdatud plokile. |
| styles | BlockStyles | Ei | BlockStyles kaart renderdatud väljundi plokitüübipõhiseks CSS-kohanduseks. |
| classNames | BlockClassNames | Ei | BlockClassNames kaart renderdatud väljundi plokitüübipõhiste CSS-klassinimede jaoks. |
| editorClassNames | EditorClassNames | Ei | EditorClassNames, mis edastatakse plokkidele, mis renderdavad interaktiivseid komponente (nt lõigu tooltip-klassinimed). |
| configs | Partial<BlockTypeOutputConfigs> | Ei | Osaline kaart plokipõhistest OutputConfig objektidest. Iga kirje saab seada plokitaseme veerised ja tooltip-klassinimed. |
| theme | 'auto' | 'light' | 'dark' | Ei | Värviskeem. Üks järgmistest: auto, light, dark. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Ei | Renderdatud väljundi režiimipõhised tokeni alistamised. |
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 },
});Plokitaseme stiilimine
Nii EditorConfig kui ka RendererConfig aktsepteerivad styles, classNames ja configs plokitüübi järgi võtmestatud. Kasuta neid sihitud alistamisteks; täieliku tokenite viite leiad Themes lehelt.
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,
});