集成方式
演练场
在接入自有后端前，在线体验自动保存、上传、元数据与 AI。
Playground
在线 Playground 展示 SVeditor 的真实 extensionsOptions 组合 — 自动保存、上传、元数据、Shiki 代码块与 AI — 便于你在实现 API 前先看清交互与请求形态。
入口
| 入口 | 登录 | 展示内容 |
|---|---|---|
| Playground | 否 | 浏览器 localStorage 自动保存 |
| 自动保存演示 | 是 | 远程持久化、上传、元数据、AI |
打开开发者工具 → Network，可查看请求 URL 与 body，便于对照接入自有后端。
应复制到你的应用的内容
Playground 不是生产 API。请复制 配置结构，不要复制 URL。
自动保存
extensionsOptions: {
autoSave: {
enabled: true,
debounceMs: 1200,
onFetch: async () => ({ content: await loadBody() }),
onSaveContent: async (json) => {
await saveBody(json);
},
},
meta: {
onFetchMeta: async () => loadMeta(),
onSaveMeta: async (meta) => saveMeta(meta),
},
}完整流程：自动保存。
图片 / 附件上传
extensionsOptions: {
image: {
proxyUrl: "https://your-cdn.example.com",
onUpload: async (file, onProgress) => {
onProgress?.({ progress: 30 });
const { url, width, height } = await uploadToYourStorage(file);
onProgress?.({ progress: 100 });
return { src: url, alt: file.name, width, height, "data-keep-ratio": true };
},
},
}见 图片与附件。
媒体代理
文档中可能以 / 开头的 key 存 src。设置 proxyUrl 即可解析展示 URL，无需改写 JSON：
extensionsOptions: {
image: { proxyUrl: "https://your-cdn.example.com" },
attachment: { proxyUrl: "https://your-cdn.example.com" },
}文档对照
| 主题 | Playground | 文档 |
|---|---|---|
| 自动保存契约 | 实时网络请求 | 自动保存 |
| React 挂载 | 可交互 UI | React / Next.js |
| 编辑能力 | 工具栏 / 菜单 | 编辑能力 |
说明
- 生产环境请替换 Playground 的 API 路径为你自己的路由。
- 文档与上传接口需自行实现鉴权。
- 本地访问需运行
pnpm dev；部分入口需登录。