Alustamine

Installi pakett, paigalda see id järgi mis tahes konteinerelementi ja ekstrakti puhast JSON-i, kui seda vajad. Clepitil pole ühtegi raamistiku sõltuvust, seega sobib see ilma ümbristeta React-i, Vue-sse, Svelte-sse või puhtasse JavaScripti.

Installi

Lisa @clepit/core oma projekti. Redaktor tarnitakse ühe ESM-komplektina koos TypeScripti definitsioonidega.

bun add @clepit/core

Loo redaktor

Lisa div ja seejärel kutsu Editor.create vajalike EditorConfig sätetega. containerId on ainus kohustuslik väli; kõik muu on valikuline.

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

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

Muuda ja salvesta

Kutsu editor.data.extract() pärast kasutajate kirjutamist, et serialiseerida EditorData JSON-kujusse. Koormuses on { blocks } massiiv iga plokiga.

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

Renderi kirjutuskaitstult

Kasuta Renderer.render, et väljastada HTML kõikjal talletatud EditorData põhjal. Renderer ei hoia ühtegi olekut. See vajab ainult div-i koos containerId-ga.

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

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

Raamistikusõltumatu

@clepit/core-il puuduvad kõrvalraamistiku sõltuvused. Nii Editor.create kui ka Renderer.render vajavad ainult täielikku DOM API-t: React, Vue, Svelte või tavalised skriptid töötavad kõik otse.