Bắt đầu

Cài đặt gói, gắn nó vào bất kỳ phần tử vùng chứa nào theo id, và trích xuất JSON sạch bất cứ khi nào bạn cần. Clepit không phụ thuộc vào framework nào, nên nó tích hợp vào React, Vue, Svelte hoặc JavaScript thuần mà không cần wrapper.

Cài đặt

Thêm @clepit/core vào dự án của bạn. Trình soạn thảo được phân phối dưới dạng một bundle ESM duy nhất cùng định nghĩa TypeScript.

bun add @clepit/core

Tạo một trình soạn thảo

Thêm một div, sau đó gọi Editor.create với các tùy chọn EditorConfig bạn cần. containerId là trường duy nhất bắt buộc; mọi thứ khác đều tùy chọn.

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

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

Chỉnh sửa và lưu

Gọi editor.data.extract() sau khi người dùng viết để tuần tự hóa sang dạng JSON EditorData. Payload mang một mảng { blocks } chứa mọi khối.

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

Kết xuất chỉ đọc

Sử dụng Renderer.render để xuất HTML từ EditorData được lưu trữ ở bất kỳ đâu. Renderer không giữ trạng thái nào. Nó chỉ cần một div với containerId.

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

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

Không phụ thuộc framework

@clepit/core không có phụ thuộc framework ngang hàng nào. Cả Editor.create và Renderer.render chỉ cần DOM API đầy đủ: React, Vue, Svelte hoặc vanilla script đều hoạt động trực tiếp.