编辑能力
富文本基础能力
SVeditor 默认启用的标题、列表、表格、引用、链接、任务列表、详情块与 Markdown 粘贴等行为说明。
富文本基础能力
SVeditor 基于 Tiptap / ProseMirror,在不配置 extensionsOptions 时即可使用下列编辑能力。工具栏与气泡菜单由 SDK 内建;你主要通过 editable、content 和可选的 extensionsOptions.theme 控制外观与只读状态。
如果需要持久化,请查看 自动保存。本页只描述可以编辑什么以及默认如何工作。
默认包含的能力
下列能力包含在 SVeditor 默认扩展集中:
| 类别 | 能力 |
|---|---|
| 段落与标题 | 段落、H1-H6(StarterKit) |
| 列表 | 有序 / 无序列表、任务列表(含快捷键扩展) |
| 表格 | 通过 TableKit 支持可调整列宽 |
| 引用与分隔 | 引用块、水平线 |
| 行内样式 | 粗体、斜体、删除线、下划线、上标、下标 |
| 颜色与高亮 | 文字颜色、多色高亮、背景色 |
| 排版 | 字号、行高、段落 / 标题对齐 |
| 链接 | 可编辑链接(默认 openOnClick: false) |
| 结构块 | 详情折叠(Details)、高亮块(Highlight block) |
| Emoji | GitHub Emoji 集,支持表情输入 |
| Markdown | 文档序列化 / 粘贴解析(GFM) |
| 其他 | 占位符、焦点样式、Typography、撤销重做 |
撤销重做使用编辑器内置历史。
在项目中接入
1. 最小配置
import { SVeditor } from "@wztlink1013/sveditor";
import "@wztlink1013/sveditor/style.css";
SVeditor.create({
el: "#editor",
content: "<h1>标题</h1><p>正文</p>",
editable: true,
});2. 只读预览
SVeditor.create({
el: "#preview",
content: savedHtmlOrJson,
editable: false,
});3. 排版主题(可选)
extensionsOptions.theme 可注册正文字体、标题颜色、代码块默认 Shiki 主题等。封面、画布背景等元数据字段可与 extensionsOptions.meta 配合使用。
SVeditor.create({
el: "#editor",
extensionsOptions: {
theme: {
// 见 ThemeExtensionOptions;可注册自定义 Theme
},
meta: {
onFetchMeta: () => fetchMeta(docId),
onSaveMeta: (meta) => saveMeta(docId, meta),
},
},
});详见 呈现与主题。
Markdown 粘贴
MarkdownPasteExtension 会在粘贴时尝试把 Markdown 转为文档结构(GFM)。解析失败时 SDK 可通过 extensionsOptions.notifications 提示用户,默认使用 Sonner toast(见 通知)。
微信公众号等特殊粘贴场景可启用 extensionsOptions.wechatCopy,与 Markdown 粘贴互不冲突。
常见接入模式
初始内容来自服务端
Server Component 拉取 JSON 字符串后传给客户端:
<SveditorMount
options={{
content: initialJsonFromServer,
extensionsOptions: {
autoSave: {
onSaveContent: (json) => save(docId, json),
},
},
}}
/>使用你的 client 挂载组件(见 React / Next.js)。
如果同时配置 autoSave.onFetch,初始 content 可被拉取结果覆盖,见 自动保存。
限制编辑
editable: false:整篇只读。- 路由层权限决定是否渲染编辑器。
参数配置
| 选项 | 位置 | 说明 |
|---|---|---|
content | EditorOptions | HTML 或 JSON 字符串初始值 |
editable | EditorOptions | 是否可编辑,默认 true |
classNames | EditorOptions | 例如 editorCore 自定义编辑区 class |
theme | extensionsOptions.theme | 正文字体与颜色主题 |
wechatCopy | extensionsOptions.wechatCopy | 微信富文本粘贴增强 |
完整字段见 EditorOptions。
注意事项
- 保存到数据库时推荐使用
getJSON()的字符串形式,而不是getHTML(),以保留节点结构(与自动保存一致)。 - 自定义节点或禁用内建扩展需定制 SDK,不能仅通过宿主
extensionsOptions完成。