SVeditor 文档
编辑能力

富文本基础能力

SVeditor 默认启用的标题、列表、表格、引用、链接、任务列表、详情块与 Markdown 粘贴等行为说明。

富文本基础能力

SVeditor 基于 Tiptap / ProseMirror,在不配置 extensionsOptions 时即可使用下列编辑能力。工具栏与气泡菜单由 SDK 内建;你主要通过 editablecontent 和可选的 extensionsOptions.theme 控制外观与只读状态。

如果需要持久化,请查看 自动保存。本页只描述可以编辑什么以及默认如何工作

默认包含的能力

下列能力包含在 SVeditor 默认扩展集中:

类别能力
段落与标题段落、H1-H6(StarterKit)
列表有序 / 无序列表、任务列表(含快捷键扩展)
表格通过 TableKit 支持可调整列宽
引用与分隔引用块、水平线
行内样式粗体、斜体、删除线、下划线、上标、下标
颜色与高亮文字颜色、多色高亮、背景色
排版字号、行高、段落 / 标题对齐
链接可编辑链接(默认 openOnClick: false
结构块详情折叠(Details)、高亮块(Highlight block)
EmojiGitHub 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:整篇只读。
  • 路由层权限决定是否渲染编辑器。

参数配置

选项位置说明
contentEditorOptionsHTML 或 JSON 字符串初始值
editableEditorOptions是否可编辑,默认 true
classNamesEditorOptions例如 editorCore 自定义编辑区 class
themeextensionsOptions.theme正文字体与颜色主题
wechatCopyextensionsOptions.wechatCopy微信富文本粘贴增强

完整字段见 EditorOptions

注意事项

  1. 保存到数据库时推荐使用 getJSON() 的字符串形式,而不是 getHTML(),以保留节点结构(与自动保存一致)。
  2. 自定义节点或禁用内建扩展需定制 SDK,不能仅通过宿主 extensionsOptions 完成。

下一步