自分の Web アプリにドキュメントエディタを埋め込む

エディタは OnlyOffice の WebAssembly エンジンでブラウザ内だけで動作するため、ドキュメントはクライアント側で描画・編集されます——ドキュメントサーバーを立てる必要はありません。推奨する構成は境界をきれいに保ちます: 親アプリが認証・取得・保存を担当し、iframe は編集だけを担当する。 トークンも 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:* メッセージです:

// open a file your app already fetched (auth stays with you)
iframe.contentWindow.postMessage(
  { id, type: 'document:open-buffer', payload: { fileName: 'report.xlsx', buffer } },
  'https://edit.chaxus.com',
);

// ask for the edited file back, then upload it yourself
iframe.contentWindow.postMessage({ id, type: 'document:save', payload: { targetExt: 'XLSX' } }, editorOrigin);
// → editor replies with { type: 'document:saved', payload: { fileName, file } }

得られるもの

• iframe 1 つと小さな postMessage のコマンド／レスポンス API——インストールする SDK はありません
• URL・File・ArrayBuffer から開けます（あなたのアプリが自分の資格情報で取得したバイト列でも可）
• XLSX・DOCX・PPTX・CSV として保存し、File として返却——アップロードはあなたのアプリが行います
• 読み取り専用モード、メッセージ単位のオリジン制限（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 で返ります。アップロードはあなたのアプリが自分の認証で行います。

読み取り専用・プレビューモード

ビューア、レビュー工程、ロックされたレコードなど、読み取り専用で開きたいときは open コマンドに readonly: true を渡します。document:set-readonly でいつでも切り替えられます——再読み込みは不要で、ユーザーが見ていた位置も保たれます。読み取り専用のあいだは編集が無効になり、document:save は document:error を返します。document:get-state は現在の readonly フラグを報告します。

// open locked, unlock later
send('document:open-url', { url, readonly: true });
send('document:set-readonly', { readonly: false });

よくある質問