易点SVG编辑器 SDK

通过一段脚本与 appKey，即可在你自己的网站中嵌入完整的在线 SVG 编辑器。

基于 iframe + postMessage 通信，支持内容加载、保存回调与会话级鉴权。

核心能力

一行脚本嵌入

引入 SDK 脚本后调用 createEditor，自动注入 iframe 编辑器。

跨域安全通信

基于 postMessage 与受信任 origin 校验，宿主页与编辑器隔离运行。

appKey 会话鉴权

使用 appKey 创建临时会话，并按白名单校验来源域名（Origin）。

内容加载与保存

通过 load() 注入初始内容，save() 主动触发保存。

事件回调

提供 onReady / onSave / onError 生命周期回调。

即用即销毁

实例提供 destroy()，随时移除编辑器并解绑监听。

快速开始

三步即可完成接入：在后台获取 appKey 并配置允许的来源域名，引入 SDK 脚本，调用 createEditor。

1. 准备一个容器

<div id="svg-editor" style="width: 100%; height: 640px;"></div>

2. 引入 SDK 脚本

<script src="https://svg.wxeditor.com/sdk/yidian-svg-sdk.iife.js"></script>

脚本以 IIFE 形式构建，会在全局挂载 YidianSvg 对象。

3. 创建编辑器

const editor = await YidianSvg.createEditor({
  container: '#svg-editor',     // CSS 选择器或 HTMLElement
  appKey: '你的_APP_KEY',       // 后台申请获得
  initialContent: '<svg ...></svg>', // 可选：初始 SVG 内容
  brandingText: '本功能由易点 SVG 编辑器提供技术支持', // 可选：顶部说明文字，默认含退出按钮，传 false 可隐藏
  onReady({ session, iframe }) {
    console.log('编辑器已就绪', session)
  },
  onSave(payload) {
    console.log('用户保存的内容', payload)
  },
  onExit(payload) {
    console.log('用户退出编辑器', payload)
  },
  onError(error) {
    console.error('SDK 错误', error)
  },
})

// 后续可主动操作
editor.load('<svg ...></svg>') // 重新加载内容
editor.save()                   // 触发保存（结果回调到 onSave）
editor.exit({ source: 'button' }) // 触发退出回调
editor.destroy()                // 销毁编辑器

若 SDK 脚本与编辑器服务不同域，可显式传入 apiBase 与 editorBase；默认从脚本所在域名推断。

API 参考

createEditor(options) → Promise<Editor>

参数	类型	必填	说明
container	string \| HTMLElement	是	编辑器挂载的容器，CSS 选择器或 DOM 元素
appKey	string	是	应用密钥，用于创建会话与来源校验
initialContent	string	否	编辑器就绪后自动加载的初始 SVG 内容
apiBase	string	否	接口基址，默认 `脚本域名/api`
editorBase	string	否	编辑器页面基址，默认脚本所在域名
title	string	否	iframe 的 title 属性，默认「易点 SVG 编辑器」
brandingText	string \| false	否	SDK 顶部说明文字，默认显示含退出按钮的品牌说明，传 `false` 可隐藏
onReady	function	否	编辑器就绪回调，参数为 `{ session, iframe }`
onSave	function	否	用户保存时回调，参数为保存的内容 payload
onExit	function	否	用户退出编辑器时回调，参数为退出 payload、session 与 iframe
onError	function	否	发生错误时回调，参数为 Error 对象

Editor 实例方法

方法 / 属性	说明
load(content)	向编辑器加载 SVG 内容；若尚未就绪则作为初始内容暂存
save()	请求编辑器保存，结果通过 `onSave` 回调返回
exit(payload)	触发退出回调，适合宿主页按钮或 iframe 内退出事件统一处理
destroy()	销毁编辑器，移除 iframe 并解绑消息监听
iframe	底层 iframe 元素引用
session	本次会话信息（token、过期时间、capabilities 等）