跳到主要内容

指南

嵌入

入门

安装该包，通过 id 将其挂载到任意容器元素中，并在需要时随时提取干净的 JSON。Clepit 没有对等框架依赖，因此无需包装器即可接入 React、Vue、Svelte 或原生 JavaScript。

安装

将 @clepit/core 添加到你的项目中。编辑器以单个 ESM 包和 TypeScript 定义的形式提供。

Shell
bun add @clepit/core

创建编辑器

添加一个 div，然后使用所需的 EditorConfig 选项调用 Editor.create。containerId 是必填项，其余均为可选。

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

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

编辑与保存

用户输入后调用 editor.data.extract() 以序列化为 EditorData JSON 形式。载荷携带一个 { blocks } 数组，包含每个块。

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

渲染为只读

使用 Renderer.render 将存储在任意位置的 EditorData 输出为 HTML。Renderer 不保持任何状态，只需要一个带有 containerId 的 div。

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

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

框架无关

@clepit/core 没有任何对等框架依赖。Editor.create 和 Renderer.render 都只需要完整的 DOM API：React、Vue、Svelte 或原生 JavaScript 均可直接使用。

Editor（挂载到 DOM，仅限浏览器）与 Renderer（从 EditorData 生成静态 HTML，可在浏览器或 SSR 中运行）。