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

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

一个 iframe 就能接入

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

只读与预览模式

需要"只看不改"（预览器、审阅环节、已归档记录）时，在打开命令里传 readonly: true；随时可以用 document:set-readonly 切换——不重新加载，文档停在用户原来的位置。只读期间禁止编辑， document:save 返回 document:error；document:get-state 会报告当前的 readonly 状态。

// 锁定打开，稍后解锁
send('document:open-url', { url, readonly: true });
send('document:set-readonly', { readonly: false });

常见问题