圖圖辦公 · 可嵌入元件

一行程式碼,網站秒接文件編輯器

把圖圖辦公文件編輯器(排版 / 表格 / 圖片 / 大綱)嵌入你的任意網站。訪客直接在你站內寫文件,可配置主題,產品更新自動生效、你零維護。

線上體驗 看接入程式碼 生成公鑰(免稽核)
複製即用 · 粘到網站 </body> 前 
<script src="https://tutudocs.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#tutudocs-editor" defer></script>

把 pk_live_YOUR_KEY 換成控制台自助生成的公鑰(任何註冊使用者,免稽核、即時生效);容器 #tutudocs-editor 需有寬高。接入時登記你的嵌入網址(白名單,本地開發填 localhost),只在你登記的網站顯示。

線上體驗

點下方按鈕,在本頁直接體驗嵌入的文件編輯器。

JS API(需要回調/自定義時)

<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>

完整引數配置

引數型別說明
keystring你的公鑰 pk_(控制台生成)。必填。
theme'auto'|'light'|'dark'主題;auto 跟隨宿主/系統明暗。
saveTextstring「完成」按鈕文案(預設「完成併發回」,≤16 字)。顯示於編輯器原生頂欄(共享/歷史 旁)。
hideSuiteboolean隱藏「全家桶啟動器」(嵌入時預設隱藏,減少干擾)。

方法

  • editor.export()匯出當前文件為 .docx → Promise<{dataUrl,mime,size}>。
  • editor.setTheme('dark')執行時切換主題。
  • editor.destroy()解除安裝元件(移除 iframe)。

事件回撥

  • onReady()編輯器就緒。
  • onSave(file)使用者點「完成」→ file.dataUrl 為匯出的 Word 文件(.docx)。
  • onError(e)e.message 已轉人話(未啟用/無權/載入失敗)。
  • onClose()全屏浮層被關閉。

安全 · 自動更新

  • · 自助開通、自動稽核:任何註冊使用者在控制台登記站點名 + 嵌入網址即得公鑰,即時生效。
  • · 公鑰公開,靠登記網址白/黑名單兜底防盜用(黑名單優先);未登記域名接入會被拒並提示補登記;可隨時啟停。
  • · 真實來源統計:每次載入按 Origin 入賬(攔截也計),控制台可見來源明細,未登記域名一鍵補白名單。
  • · 編輯器執行在圖圖辦公自己的域(隔離);你的頁面拿不到任何圖圖辦公憑證,訪客的圖圖辦公私有文件也不會出現在嵌入元件裡。
  • · 元件由圖圖辦公自託管、自動更新 —— 功能升級你無需改程式碼、零維護。