挂载 SVeditor、读写正文、启用自动保存，并在 React 和 Next.js 中安全销毁实例。

快速开始

本页覆盖最小可用接入：挂载编辑器、读写正文、有后端时启用自动保存，并在页面卸载时销毁实例。

示例默认你已经完成安装，并从 @wztlink1013/sveditor 导入 SDK（默认 ESM）。CDN 用户可将导入替换为 window.SVeditor，见 CDN 集成。

第一步：挂载编辑器

创建 DOM 容器，然后调用 SVeditor.create()（CDN 下为 create()）：

<div id="editor" style="min-height: 640px;"></div>

import { SVeditor } from "@wztlink1013/sveditor";
import "@wztlink1013/sveditor/style.css";

const editor = SVeditor.create({
  el: "#editor",
  content: "<p>开始写作</p>",
  editable: true,
});

content 可以是 HTML 字符串，也可以是 Tiptap/ProseMirror JSON 字符串。

第二步：读取和设置正文

const html = editor.getHTML();
const json = editor.getJSON();

editor.setHTML("<p>新的内容</p>");
// 或 editor.commands.setContent(parsedJson);

服务端持久化时，推荐保存 JSON.stringify(editor.getJSON())，这也是自动保存传给 onSaveContent 的形状。

第三步：在 React 中创建和销毁

SVeditor 自己管理 DOM 和 Tiptap 状态。组件卸载时必须调用 destroy()，并避免每次 render 都传入新的 options 对象，否则编辑器会被重建。

"use client";

import { useEffect, useMemo, useRef } from "react";
import { SVeditor } from "@wztlink1013/sveditor";
import type { EditorOptions } from "@wztlink1013/sveditor";
import "@wztlink1013/sveditor/style.css";

type EditorInitOptions = Omit<EditorOptions, "el">;

export function MinimalEditor() {
  const containerRef = useRef<HTMLDivElement>(null);

  const options = useMemo<EditorInitOptions>(
    () => ({
      content: "<p>Hello</p>",
      editable: true,
    }),
    [],
  );

  useEffect(() => {
    if (!containerRef.current) {
      return;
    }

    const editor = SVeditor.create({
      el: containerRef.current,
      ...options,
    });

    return () => editor.destroy();
  }, [options]);

  return <div ref={containerRef} className="min-h-[640px]" />;
}

Next.js 请封装 client 挂载组件，见 React / Next.js 集成。

第四步：按需启用扩展

所有扩展配置都放在 extensionsOptions 下，不是顶层字段。

能力	Key	指南
正文自动保存	`extensionsOptions.autoSave`	自动保存
标题 / emoji / 封面	`extensionsOptions.meta`	自动保存 meta
版本历史	`extensionsOptions.versionHistory`	版本历史
图片 / 附件上传	`extensionsOptions.image` / `attachment`	图片与附件
AI 写作	`extensionsOptions.ai`	AI

没有后端时，可参考自动保存浏览器原型中的 localStorage 模式。

常见错误

现象	原因	解决方式
工具栏样式损坏	缺少 `style.css` / `sv-editor-sdk.css`	按安装引入样式
每次输入都丢焦点	每次 render 都创建新的 `options`	用 `useMemo` 稳定对象
自动保存不触发	把 `autoSave` 放在根配置上	移到 `extensionsOptions.autoSave`