集成方式
CDN 集成
在没有 bundler 的宿主中通过官方 UMD CDN 加载 SVeditor，并接入自动保存与生命周期清理。
CDN 集成
当你没有 webpack、Vite 或其他 bundler 时，可以使用官方 CDN UMD 包，例如旧系统、CMS 嵌入和快速原型。
若可以使用 npm 与 bundler，请优先采用 ESM 包。 ESM 是新项目的默认接入方式。
接入路径：
- 加载
sv-editor-sdk.css和sv-editor-sdk.umd.js。 - 通过
window.SVeditor.create()挂载。 - 如需持久化，在
extensionsOptions.autoSave下实现onFetch/onSaveContent（见 自动保存）。
最小页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVeditor CDN</title>
<link
rel="stylesheet"
href="https://static.editor.showverge.com/sdk/sveditor/0.2.16/sv-editor-sdk.css"
/>
<style>
#editor {
min-height: 640px;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="editor"></div>
<script src="https://static.editor.showverge.com/sdk/sveditor/0.2.16/sv-editor-sdk.umd.js"></script>
<script>
const { create } = window.SVeditor;
const editor = create({
el: "#editor",
content: "<p>SVeditor loaded from CDN</p>",
});
window.addEventListener("beforeunload", () => editor.destroy());
</script>
</body>
</html>接入自动保存
自动保存配置应放在 extensionsOptions.autoSave 下，而不是顶层 autoSave 字段。
<div id="editor"></div>
<p id="status"></p>
<script src="https://static.editor.showverge.com/sdk/sveditor/0.2.16/sv-editor-sdk.umd.js"></script>
<script>
const { create } = window.SVeditor;
const statusEl = document.getElementById("status");
const docId = "my-doc";
const editor = create({
el: "#editor",
extensionsOptions: {
autoSave: {
onFetch: async () => {
const res = await fetch(`/api/docs/${docId}`, { cache: "no-store" });
if (!res.ok) {
throw new Error(`Fetch failed: ${res.status}`);
}
const data = await res.json();
return { content: data.content ?? "" };
},
onSaveContent: async (json) => {
const res = await fetch(`/api/docs/${docId}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ content: json }),
});
if (!res.ok) {
throw new Error(`Save failed: ${res.status}`);
}
},
debounceMs: 1000,
onStatusChange: (status) => {
statusEl.textContent = {
idle: "",
saving: "Saving...",
saved: "Saved",
error: "Save failed",
}[status] ?? "";
},
},
},
});
window.addEventListener("beforeunload", () => editor.destroy());
</script>完整 Next.js 文档 API 流程见 自动保存。
接入图片上传
你负责实现存储；SDK 在上传成功后插入可调整尺寸的图片节点：
const editor = create({
el: "#editor",
extensionsOptions: {
image: {
proxyUrl: "https://cdn.example.com",
onUpload: async (file, onProgress) => {
onProgress?.({ progress: 30 });
const form = new FormData();
form.append("file", file);
const res = await fetch("/api/upload/image", {
method: "POST",
body: form,
});
if (!res.ok) {
throw new Error("Upload failed");
}
const { url, width, height } = await res.json();
onProgress?.({ progress: 100 });
return {
src: url,
alt: file.name,
width: width ?? 800,
height: height ?? 600,
"data-keep-ratio": true,
};
},
},
},
});见 图片与附件。
锁定版本
生产环境请始终锁定 URL 中的版本号：
<link
rel="stylesheet"
href="https://static.editor.showverge.com/sdk/sveditor/0.2.16/sv-editor-sdk.css"
/>
<script src="https://static.editor.showverge.com/sdk/sveditor/0.2.16/sv-editor-sdk.umd.js"></script>升级 CDN 路径前，先在 staging 验证 extensionsOptions。
全局对象与参数
| 项 | 含义 |
|---|---|
window.SVeditor.create | 等同于 ESM 的 SVeditor.create |
window.SVeditor.version | 当前加载的 UMD 构建版本 |
extensionsOptions | 与 ESM 包相同；见 扩展参数 |
注意事项
- CSS 和 JS 都要加载；缺少 CSS 会破坏工具栏和布局。
- 远程 Shiki 语法包使用动态
import()；必要时调整 CSP。见 代码块。 - 页面跳转前调用
editor.destroy()，避免泄漏监听器和轮询。