API 参考

来自 @clepit/core 的公共导出。下面每个符号都提供了带类型的签名和最小化的使用示例。

Editor

核心编辑器类。Editor 包含两个公共静态方法：create（主工厂）和 destroy。create() 方法返回一个 EditorAPI 对象，编辑器挂载后可通过该对象访问所有方法。

方法	签名	说明
Editor.create	Editor.create(config: EditorConfig): EditorAPI	创建一个新的编辑器实例，并将其挂载到具有所提供 containerId 的 DOM 元素中。
Editor.destroy	Editor.destroy(containerId: string): void	EditorAPI 对象上的 destroy() 方法会为该实例调用 Editor.destroy()。

方法	签名	说明
data.extract	data.extract(): EditorData	从编辑器实例中以 JSON 安全的 EditorData 形式提取当前区块数据。
data.set	data.set(data: EditorData): void	用新的数据负载替换整个区块列表。这会触发一次完整的重新渲染。
data.clear	data.clear(): void	同时清除块内容和已保存的状态数据。
data.clearContent	data.clearContent(): void	仅删除块，store 中的数据保持不变。
data.clearStorage	data.clearStorage(): void	仅清除 store 数据，保留当前块不变。
blocks.insert	blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement \| null	在给定的 index 处插入一个区块。接受与目标区块类型相同的数据结构。
blocks.convert	blocks.convert(blockId: string, newType: BlockToolType): void	就地将一个区块转换为新类型。
blocks.remove	blocks.remove(index: number): void	移除位于给定 index 处的区块。
blocks.move	blocks.move(fromIndex: number, toIndex: number): void	将块从一个索引移动到另一个索引。
blocks.update	blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void	就地更新现有块的数据。类型不变。
blocks.get	blocks.get(blockId: string): EditorData['blocks'][number] \| null	按 ID 获取一个块。若未找到则返回 null。
blocks.getAll	blocks.getAll(): EditorData['blocks']	以数组形式返回所有块的数据。
blocks.count	blocks.count(): number	返回编辑器中的块数量。
focus	focus(): void	将焦点移至编辑器，聚焦到第一个块。
blur	blur(): void	移除编辑器内任何活动元素的焦点。
destroy	destroy(): void	EditorAPI 对象上的 destroy() 方法会为该实例调用 Editor.destroy()。
selection.get	selection.get(): Selection \| null	返回窗口选择对象或 null。
selection.set	selection.set(selection: Selection): void	将窗口选择设置为提供的 Selection 对象。
selection.clear	selection.clear(): void	移除窗口选择的所有范围。
ui.showBlockMenu	ui.showBlockMenu(block: HTMLElement): void	为给定的块 DOM 元素显示块类型菜单。
ui.hideBlockMenu	ui.hideBlockMenu(): void	如果块类型菜单已打开，则将其隐藏。
ui.showToolbar	ui.showToolbar(x: number, y: number): void	在给定的 x、y 视口坐标处显示内联工具栏。
ui.hideToolbar	ui.hideToolbar(): void	如果内联工具栏可见，则将其隐藏。
view.getCurrentView	view.getCurrentView(containerId: string): EditorView \| null	返回给定 containerId 的当前视图（edit、preview 或 json）。
view.switchView	view.switchView(containerId: string, view: EditorView): void	将编辑器切换到指定视图：edit、preview 或 json。

典型用法示例

TypeScript

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

const editor = Editor.create({
  containerId: 'editor',
  theme: 'auto',
  placeholder: 'Start writing...',
  minHeight: 300,
});

// Insert a block
editor.blocks.insert('paragraph', { html: 'Hello world' }, 0);

// Extract data
const data = editor.data.extract();

// Switch view
editor.view.switchView('editor', 'preview');

// Tear down
editor.destroy();

Renderer

将已保存的块数据转换为 DOM 元素中的只读 HTML 的类。此类有一个公共静态方法：render()。

方法	签名	说明
Renderer.render	Renderer.render(config: RendererConfig): HTMLElement	将已保存的区块 JSON 渲染为容器内的只读 HTML。在任何你想展示内容但不需要编辑功能的地方使用它。

典型用法示例

TypeScript

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

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

StyleManager

管理主题系统的核心类。为消费者提供三个有用的公共静态方法：subscribe（用于操作系统级主题变化）、getResolvedTheme（获取当前操作系统主题）和 injectStyles（注入自定义 CSS）。

方法	签名	说明
StyleManager.subscribe	StyleManager.subscribe(cb: (theme: 'light' \| 'dark') => void): () => void	订阅运行时主题 token 的变化。每当 theme 或 themeOverrides 发生改变时，监听器都会触发。
StyleManager.getResolvedTheme	StyleManager.getResolvedTheme(): 'light' \| 'dark'	读取当前 OS 主题（"light" 或 "dark"）。若 matchMedia 不可用则返回 "light"。
StyleManager.injectStyles	StyleManager.injectStyles(styleId: string, styles: string): boolean	将 CSS 字符串注入 document.head（使用唯一的 styleId）。若已存在则返回 false，否则返回 true。

典型用法示例

TypeScript

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

// React to OS theme changes
const unsubscribe = StyleManager.subscribe(theme => {
  console.log('OS theme:', theme); // 'light' | 'dark'
});

// Read current OS theme
const current = StyleManager.getResolvedTheme();

// Inject custom CSS once
StyleManager.injectStyles('my-overrides', `
  .clepit-editor { font-family: 'Inter', sans-serif; }
`);

// Unsubscribe when done
unsubscribe();

入门

参考

服务端 API

指南

API 参考

Editor

典型用法示例

Renderer

典型用法示例

StyleManager

典型用法示例