Usanidi

EditorConfig na RendererConfig ni vituo vya kuingilia kwa kila ubinafsishaji. Pita moja kati yake kwa Editor.create() au Renderer.render() ipasavyo. Ni containerId tu (na data kwa renderer) inayohitajika, chaguzi zote nyingine zina mipangilio salama ya chaguo-msingi.

EditorConfig

Pita EditorConfig kama hoja pekee kwa Editor.create(). containerId inayohitajika lazima ilingane na id ya kipengele cha DOM kilichopo.

Chaguo	Aina	Inahitajika	Maelezo
containerId	string	Ndiyo	ID ya kipengele cha DOM ambacho kitaandaa kihariri. Lazima kiwepo kwenye DOM kabla ya Editor.create() kuitwa.
maxHeight	number	Hapana	Urefu wa juu zaidi wa kihariri kwa pixels. Weka 0 (chaguo-msingi) kwa hakuna kikomo cha urefu.
minHeight	number	Hapana	Urefu wa chini zaidi wa kihariri kwa pixels. Chaguo-msingi ni 300.
onChange	(data: EditorData) => void	Hapana	Callback inayowaka kila wakati hati inabadilika. Inapokea picha kamili ya EditorData.
onReady	() => void	Hapana	Callback inayowaka mara kihariri kimekamilika kuanzishwa na kiko tayari kukubali simu za API.
placeholder	string	Hapana	Maandishi ya mpangilio yaliyoonyeshwa wakati kihariri kiko tupu. Chaguo-msingi ni 'Start writing...'.
initialData	EditorData	Hapana	EditorData iliyojazwa awali kupakia wakati kihariri kinawekwa.
initialView	'edit' \| 'preview' \| 'json'	Hapana	Hali ya mwanzo ya mtazamo. Moja ya: edit, preview, json. Chaguo-msingi ni 'edit'.
allowJsonViewEditing	boolean	Hapana	Iwapo true, mtazamo wa JSON unaweza kuhaririwa na mabadiliko yanaenea nyuma kwenye hati. Chaguo-msingi ni false.
margins	BlockMargins	Hapana	Pembezoni ya juu na chini ya ulimwenguni (kwa pixels) inayotumika kwa kila block. Mipangilio ya kila block ina kipaumbele.
styles	EditorStyles	Hapana	Kitu cha EditorStyles kwa ubinafsishaji wa CSS wa kina wa chrome ya kihariri (mwambaa wa zana, mazungumzo, vidhibiti).
classNames	EditorClassNames	Hapana	Kitu cha EditorClassNames kuambatanisha majina ya darasa la CSS kwa vipengele vya chrome ya kihariri.
imageUploader	UploadFunction	Hapana	Kazi ya async inayopakia faili la picha na kurudisha mfuatano wa URL ya umma.
audioUploader	UploadFunction	Hapana	Kazi ya async inayopakia faili la sauti na kurudisha mfuatano wa URL ya umma.
videoUploader	UploadFunction	Hapana	Kazi ya async inayopakia faili la video na kurudisha mfuatano wa URL ya umma.
theme	'auto' \| 'light' \| 'dark'	Hapana	Mpango wa rangi. Moja ya: auto (inafuata mfumo), light, dark. Chaguo-msingi ni auto.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	Hapana	Ubatilishaji wa token kwa kila hali. Toa ramani za token za light na/au dark kubinafsisha rangi bila kubadilisha mandhari nzima.

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

Pita RendererConfig kama hoja pekee kwa Renderer.render(). containerId na data zote mbili zinahitajika.

Chaguo	Aina	Inahitajika	Maelezo
containerId	string	Ndiyo	ID ya kipengele cha DOM ambapo matokeo yaliyochapishwa yataingizwa.
data	EditorData	Ndiyo	Hati ya EditorData ya kuchapishwa. Inahitajika.
margins	BlockMargins	Hapana	Pembezoni ya juu na chini ya ulimwenguni (kwa pixels) inayotumika kwa kila block iliyochapishwa.
styles	BlockStyles	Hapana	Ramani ya BlockStyles kwa ubinafsishaji wa CSS wa kila aina ya block ya matokeo yaliyochapishwa.
classNames	BlockClassNames	Hapana	Ramani ya BlockClassNames kwa majina ya darasa la CSS ya kila aina ya block kwenye matokeo yaliyochapishwa.
editorClassNames	EditorClassNames	Hapana	EditorClassNames zilizopitishwa kwa blocks ambazo zinaonyesha vipengele vya mwingiliano (mf. classNames za tooltip kwa aya).
configs	Partial<BlockTypeOutputConfigs>	Hapana	Ramani ya sehemu ya vitu vya OutputConfig kwa kila block. Kila ingizo linaweza kuweka pembezoni za ngazi ya block na majina ya darasa la tooltip.
theme	'auto' \| 'light' \| 'dark'	Hapana	Mpango wa rangi. Moja ya: auto, light, dark.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	Hapana	Ubatilishaji wa token kwa kila hali kwa matokeo yaliyochapishwa.

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 },
});

Uundaji wa mtindo wa ngazi ya block

Zote EditorConfig na RendererConfig zinakubali styles, classNames, na configs zilizofungwa kwa aina ya block. Tumia hizi kwa ubatilishaji uliolenga; angalia ukurasa wa Themes kwa marejeo kamili ya kila token.

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,
});

Kuanza

Marejeo

API ya Seva

Mwongozo

Usanidi

EditorConfig

RendererConfig

Uundaji wa mtindo wa ngazi ya block