Rukia hadi maudhui makuu

Mwongozo

Upachikaji

Kuanza

Sakinisha kifurushi, kipachike kwenye kipengele chochote cha kontena kwa id, na utoe JSON safi wakati wowote unapohitaji. Clepit haina utegemezi wa framework, hivyo inaingia kwenye React, Vue, Svelte, au JavaScript halisi bila vifungashio.

Sakinisha

Ongeza @clepit/core kwenye mradi wako. Kihariri huja kama kifurushi kimoja cha ESM pamoja na ufafanuzi wa TypeScript.

Shell
bun add @clepit/core

Unda kihariri

Ongeza div, kisha ita Editor.create na chaguo za EditorConfig unazohitaji. containerId ndiyo shamba pekee linalolazimu; kila kitu kingine ni cha hiari.

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

const editor = Editor.create({
  containerId: 'editor',
  onChange: data => console.log(data),
  placeholder: 'Start writing…',
  theme: 'auto',
});

Hariri na hifadhi

Ita editor.data.extract() baada ya watumiaji kuandika ili kuserialisha katika umbo la JSON la EditorData. Mzigo hubeba safu { blocks } yenye kila kizuizi.

TypeScript
const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [
//     { id: 'abc123', type: 'paragraph', data: { html: 'Hello world' } },
//     ...
//   ]
// }

Onyesha kusoma tu

Tumia Renderer.render kutoa HTML kutoka kwa EditorData iliyohifadhiwa popote. Renderer hahifadhi hali yoyote. Inahitaji tu div yenye containerId.

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

Renderer.render({
  containerId: 'output',
  data: savedEditorData,
  margins: { bottom: 0, top: 0 },
});

Haikutegemea mfumo

@clepit/core haina utegemezi wa mfumo wa peer. Zote Editor.create na Renderer.render zinahitaji DOM API kamili tu: React, Vue, Svelte, au hati ya vanilla zote hufanya kazi moja kwa moja.

Editor (hupachikwa kwenye DOM, kivinjari tu) dhidi ya Renderer (hutoa HTML tuli kutoka kwa EditorData, inaweza kukimbia kwenye kivinjari au kupitia SSR).