開發者 · 嵌入

把文件編輯器嵌入你的 Web 應用

用一個 iframe 加 postMessage API，把 DOCX、XLSX、PPTX、CSV 編輯器加進你的產品。鑑權、檔案訪問和上傳都留在你的應用裡——編輯器只負責編輯，永遠看不到使用者的 token。

編輯器完全在瀏覽器裡用 OnlyOffice WebAssembly 引擎執行，文件在客戶端渲染和編輯——你不需要部署文件伺服器。推薦模式保持清晰邊界： 父應用負責鑑權、拉取與儲存；iframe 只負責編輯。token、cookie 和業務 API 都留在你的應用裡。

一個 iframe 就能接入

<iframe
  id="documentEditor"
  src="https://document26.pages.dev/?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://document26.pages.dev'
);

// 要回編輯後的檔案，再由你自己上傳
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 返回編輯後的檔案，由你的應用用自己的鑑權上傳。

常見問題