Incorporar um editor de documentos no seu app web

O editor roda inteiramente no navegador com o motor WebAssembly do OnlyOffice, então os documentos são renderizados e editados no cliente — você não sobe nenhum servidor de documentos. O padrão recomendado mantém a fronteira limpa: o app pai cuida da autenticação, da busca e do salvamento; o iframe cuida só da edição. Tokens, cookies e APIs de negócio ficam no seu app.

Adicione com um 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>

Depois é só falar com ele por postMessage. Cada comando leva um id para você casar com a resposta, e cada evento do editor é uma mensagem document:*:

// abre um arquivo que seu app já buscou (a auth fica com você)
iframe.contentWindow.postMessage(
  { id, type: 'document:open-buffer', payload: { fileName: 'report.xlsx', buffer } },
  'https://edit.chaxus.com',
);

// peça de volta o arquivo editado e envie você mesmo
iframe.contentWindow.postMessage({ id, type: 'document:save', payload: { targetExt: 'XLSX' } }, editorOrigin);
// → o editor responde com { type: 'document:saved', payload: { fileName, file } }

O que você ganha

• Um iframe e uma pequena API postMessage de comando/resposta — sem SDK para instalar
• Abrir a partir de uma URL, um File ou um ArrayBuffer que seu app buscou com as próprias credenciais
• Salvar de volta em XLSX, DOCX, PPTX ou CSV, devolvido como um File para o seu app enviar
• Modo somente leitura, trava de origem por mensagem (embedOrigin) e uma consulta de estado
• Nenhum servidor de documentos para operar — a edição é 100% WebAssembly no cliente
• Código aberto (AGPL-3.0) e auto-hospedável — incorpore sob o seu próprio domínio

Como funciona

1. Adicione o iframe apontando para /editor?embed=1, no tamanho do seu layout.
2. Espere o evento document:ready e então envie document:open-url, open-file ou open-buffer.
3. A pessoa edita ali mesmo; o arquivo não sai do navegador a menos que seu app o envie para algum lugar.
4. Envie document:save; o editor devolve o arquivo editado em document:saved, e seu app o envia com a própria autenticação.

Somente leitura e modo prévia

Abra um documento somente leitura (um visualizador, uma etapa de revisão, um registro travado) passando readonly: true no comando de abertura, e alterne quando quiser com document:set-readonly — sem recarregar, e o documento continua onde a pessoa estava. No modo somente leitura a edição fica desativada e document:save responde com document:error; document:get-state informa o valor atual de readonly.

// abrir travado, destravar depois
send('document:open-url', { url, readonly: true });
send('document:set-readonly', { readonly: false });

Perguntas frequentes