Pagsisimula

I-install ang package, i-mount ito sa anumang container element gamit ang id, at mag-extract ng malinis na JSON kapag kailangan mo. Walang peer framework dependency ang Clepit, kaya pumapasok ito sa React, Vue, Svelte, o vanilla JavaScript nang walang wrapper.

I-install

Idagdag ang @clepit/core sa iyong proyekto. Ang editor ay dumarating bilang isang ESM bundle na may TypeScript definitions.

bun add @clepit/core

Gumawa ng editor

Magdagdag ng div, pagkatapos ay tawagin ang Editor.create kasama ang mga EditorConfig option na kailangan mo. Ang containerId lang ang required; lahat ng iba ay opsyonal.

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

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

I-edit at i-save

Tawagin ang editor.data.extract() pagkatapos sumulat ang mga user para i-serialize sa EditorData JSON shape. Ang payload ay may kasamang { blocks } array na may bawat block.

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

Mag-render nang read-only

Gamitin ang Renderer.render para mag-output ng HTML mula sa EditorData na nakaimbak kahit saan. Walang hawak na state ang Renderer. Isang div lang na may containerId ang kailangan nito.

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

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

Hindi nakadepende sa framework

Walang peer framework dependency ang @clepit/core. Ang parehong Editor.create at Renderer.render ay nangangailangan lamang ng buong DOM API: direktang gumagana ang React, Vue, Svelte, o vanilla script.