编辑器核心参数、自动保存、元数据、上传、AI、版本历史和生命周期回调。

EditorOptions

SVeditor.create() 接收一个 EditorOptions 对象。唯一必填字段是 el；大部分产品行为都放在 extensionsOptions 下。

SVeditor.create({
  el: "#editor",
  content: "<p>Hello</p>",
  editable: true,
  extensionsOptions: {
    autoSave: {
      onFetch: () => fetchContent(docId),
      onSaveContent: (json) => saveContent(docId, json),
    },
  },
});

核心参数

选项	类型	默认值	说明
`el`	`string \| HTMLElement`	必填	挂载目标
`content`	`string \| object`	`""`	初始 HTML 或 ProseMirror JSON
`editable`	`boolean`	`true`	文档是否可编辑
`classNames`	`ClassNames`	-	宿主自定义 class
`extensionsOptions`	`ExtensionsOptions`	`{}`	功能配置

自动保存

extensionsOptions?.autoSave?: AutoSaveOptions

选项	类型	默认值	说明
`enabled`	`boolean`	`true`	启用自动保存
`onFetch`	`() => Promise<{ content: string }>`	-	编辑器渲染前加载正文
`onSaveContent`	`(json: string) => Promise<void>`	-	持久化正文 JSON
`debounceMs`	`number`	`1000`	保存防抖时间
`onStatusChange`	`(status) => void`	-	接收 `idle`、`saving`、`saved` 或 `error`

完整流程见自动保存。

Code Block Shiki

extensionsOptions?.codeBlockShiki?: CodeBlockShikiOptions

选项	类型	默认值	说明
`defaultTheme`	`string`	SDK 默认	默认 Shiki 主题
`cdn`	`false \| CodeBlockShikiCdnOptions`	启用	远程 Shiki 语言/主题加载

见代码块。

AI

extensionsOptions?.ai?: AiExtensionOptions

选项	类型	默认值	说明
`enabled`	`boolean`	`false`	启用 AI 扩展
`aiConfig.onStreamRequest`	`(opts: AiTextResolverOptions) => Promise<ReadableStream>`	-	流式请求处理
`aiConfig.onCompletionRequest`	`(opts: AiTextResolverOptions) => Promise<string \| null>`	-	补全请求处理
`onLoading`	`(context) => void`	-	AI 加载回调
`onSuccess`	`(context) => void`	-	AI 成功回调
`onError`	`(error, context) => void`	-	AI 错误回调

图片

extensionsOptions?.image?: ImageExtensionOptions

选项	类型	默认值	说明
`enabled`	`boolean`	`true`	启用图片扩展
`onUpload`	`(file: File) => Promise<string>`	-	图片上传处理，返回 URL

附件

extensionsOptions?.attachment?: AttachmentExtensionOptions

选项	类型	默认值	说明
`enabled`	`boolean`	`true`	启用附件扩展
`onUpload`	`(file: File) => Promise<{ url: string; name: string }>`	-	附件上传处理

微信复制

extensionsOptions?.wechatCopy?: WechatCopyExtensionOptions

选项	类型	默认值	说明
`enabled`	`boolean`	`false`	启用微信复制
`onCopy`	`(payload) => void`	-	复制事件回调

元数据

extensionsOptions?.meta?: MetaOptions

标题栏、emoji 和封面使用 FetchMetaObject。

选项	类型	默认值	说明
`onFetchMeta`	`() => Promise<FetchMetaObject>`	-	编辑器渲染前加载元数据
`onSaveMeta`	`(meta: FetchMetaObject) => Promise<void>`	-	从内建元数据 UI 持久化元数据
`onMetaChange`	`(meta: FetchMetaObject) => void`	-	元数据变化时同步宿主状态

如果提供了 onSaveMeta 或 onMetaChange，内建元数据区域会显示。运行时可通过 EditorInstance 上的 editor.getMeta() 和 editor.setMeta(partial) 读取与合并元数据。

版本历史

extensionsOptions?.versionHistory?: VersionHistoryOptions

完整说明见版本历史。

选项	类型	默认值	说明
`enabled`	`boolean`	`false`	启用版本历史
`storageKey`	`string`	-	localStorage key
`maxEntries`	`number`	`50`	最多保留的本地快照数
`debounceMs`	`number`	`2000`	自动快照防抖时间

生命周期回调

选项	类型	说明
`onCreate`	`(instance: EditorInstance) => void`	编辑器就绪后调用
`onUpdate`	`(instance: EditorInstance) => void`	正文每次变化时调用
`onDestroy`	`() => void`	编辑器销毁时调用

ClassNames

interface ClassNames {
  root?: string;
  toolbar?: string;
  content?: string;
}

完整示例

SVeditor.create({
  el: "#editor",
  content: "<p>Hello world</p>",
  editable: true,

  extensionsOptions: {
    autoSave: {
      onFetch: async () => fetchDoc(docId),
      onSaveContent: async (json) => saveDoc(docId, json),
      debounceMs: 1000,
      onStatusChange: setSaveStatus,
    },
    meta: {
      onFetchMeta: async () => fetchMeta(docId),
      onSaveMeta: async (meta) => saveMeta(docId, meta),
      onMetaChange: (meta) => setHostMetaSnapshot(meta),
    },
    ai: {
      enabled: true,
      aiConfig: {
        onStreamRequest: handleAiStream,
      },
    },
    image: {
      enabled: true,
      onUpload: async (file) => uploadImage(file),
    },
    versionHistory: {
      enabled: true,
      storageKey: `doc:${docId}:snapshots`,
      maxEntries: 50,
    },
  },

  onCreate: (instance) => {
    console.log("Editor ready", instance);
  },
  onDestroy: () => {
    console.log("Editor destroyed");
  },
});

EditorOptions

On this page