TutuDocs · Componente incorporável
Uma linha de código: adicione um editor de documentos ao seu site em segundos
Incorpore o editor de documentos do TutuDocs (layout / tabelas / imagens / estrutura de tópicos) em qualquer site. Os visitantes escrevem documentos diretamente no seu site, os temas são configuráveis e as atualizações do produto se aplicam automaticamente — manutenção zero para você.
Copiar e colar — antes da tag
</body> da sua página <script src="https://tutudocs.com/embed.js"
data-key="pk_live_YOUR_KEY"
data-mount="#tutudocs-editor" defer></script> Substitua pk_live_YOUR_KEY por uma chave que você mesmo gera no console (qualquer usuário registrado — sem revisão, instantâneo); o contêiner #tutudocs-editor precisa de largura e altura. Registre a URL de incorporação na configuração (lista de permissões; para desenvolvimento local use localhost); ele só aparece nos sites que você registrar.
Experimente ao vivo
Clique no botão abaixo para experimentar o editor de documentos incorporado aqui mesmo.
API JS (para retornos de chamada / personalização)
<script src="https://tutudocs.com/embed.js"></script>
<script>
const editor = TutuDocs.mount('#tutudocs-editor', {
key: 'pk_live_YOUR_KEY',
theme: 'auto', // auto | light | dark
onSave: (file) => {
// file.dataUrl = the exported Word document (.docx, base64)
upload(file.dataUrl);
}
});
// After the user clicks Done, onSave returns the .docx; or call it directly:
// const { dataUrl } = await editor.export();
</script>Opções de configuração completas
| Parâmetro | Tipo | Descrição |
|---|---|---|
| key | string | Sua chave pública pk_ (gerada no console). Obrigatório. |
| theme | 'auto'|'light'|'dark' | Tema; auto segue o modo claro ou escuro do host/sistema. |
| saveText | string | Texto do botão «Concluir» (padrão «Concluir e devolver», ≤16 caracteres). Exibido na barra superior nativa do editor (ao lado de Compartilhar/Histórico). |
| hideSuite | boolean | Oculta o lançador da suíte (oculto por padrão quando incorporado para reduzir distrações). |
Métodos
editor.export()Exporta o documento atual como .docx → Promise<{dataUrl,mime,size}>.editor.setTheme('dark')Alterar o tema em tempo de execução.editor.destroy()Desmonta o componente (remove o iframe).
Retornos de chamada de eventos
onReady()O editor está pronto.onSave(file)O usuário clica em «Concluir» → file.dataUrl é o documento Word exportado (.docx).onError(e)e.message está em linguagem clara (não ativado / sem permissão / falha ao carregar).onClose()A sobreposição em tela cheia foi fechada.
Segurança · Atualizações automáticas
- · Autoatendimento, aprovação automática: qualquer usuário registrado registra um nome de site + URL de incorporação no console e obtém uma chave que funciona instantaneamente.
- · A chave é pública; uma lista de permissão/negação de URLs registradas impede o uso indevido (a lista de negação prevalece). Domínios não registrados são recusados com um aviso para registrá-los; você pode pausar ou retomar a qualquer momento.
- · Análises de origem reais: cada carregamento é contabilizado por Origin (inclusive os bloqueados); o console mostra um detalhamento por origem, e você pode permitir um domínio não registrado com um clique.
- · O editor é executado no próprio domínio do TutuDocs (isolado); sua página não consegue acessar nenhuma credencial do TutuDocs, e os documentos privados do TutuDocs de um visitante nunca aparecem no componente incorporado.
- · O componente é auto-hospedado e atualizado automaticamente pelo TutuDocs —— as melhorias de recursos não exigem alterações de código do seu lado; manutenção zero.