开发者 · 嵌入

把文档编辑器嵌入你的 Web 应用

用一个 iframe 加 postMessage API，把 DOCX、XLSX、PPTX、CSV 编辑器加进你的产品。鉴权、文件访问和上传都留在你的应用里——编辑器只负责编辑，永远看不到用户的 token。

编辑器完全在浏览器里用 OnlyOffice WebAssembly 引擎运行，文档在客户端渲染和编辑——你不需要部署文档服务器。推荐模式保持清晰边界： 父应用负责鉴权、拉取与保存；iframe 只负责编辑。token、cookie 和业务 API 都留在你的应用里。

一个 iframe 就能接入

<iframe
  id="documentEditor"
  src="https://edit.chaxus.com/?embed=1&embedOrigin=https://your-app.example.com"
  style="width: 100%; height: 720px; border: 0"
></iframe>

然后用 postMessage 和它通信。每条命令带一个 id 用来匹配回复，编辑器的每个事件都是 document:* 消息：

// 打开一个你的应用已经拉取好的文件（鉴权全在你这边）
iframe.contentWindow.postMessage(
  { id, type: 'document:open-buffer', payload: { fileName: 'report.xlsx', buffer } },
  'https://edit.chaxus.com'
);

// 要回编辑后的文件，再由你自己上传
iframe.contentWindow.postMessage({ id, type: 'document:save', payload: { targetExt: 'XLSX' } }, editorOrigin);
// → 编辑器回复 { type: 'document:saved', payload: { fileName, file } }

你能得到什么

• 一个 iframe + 一套小巧的 postMessage 命令/响应 API——无需安装 SDK
• 从 URL、File 或 ArrayBuffer 打开（都由你的应用用自己的凭据拉取）
• 保存回 XLSX、DOCX、PPTX 或 CSV，以 File 返回给你的应用上传
• 只读模式、按消息锁定 origin（embedOrigin）、状态查询
• 无需部署文档服务器——编辑 100% 是客户端 WebAssembly
• 开源（AGPL-3.0）、可自托管——在你自己的域名下嵌入

工作原理

1. 加入指向编辑器、带 ?embed=1 的 iframe，按布局设尺寸。
2. 等 document:ready 事件，再发送 document:open-url、open-file 或 open-buffer。
3. 用户就地编辑；除非你的应用主动发送，文件不会离开浏览器。
4. 发送 document:save，编辑器通过 document:saved 返回编辑后的文件，由你的应用用自己的鉴权上传。

常见问题