TutuDocs · 埋め込み可能なコンポーネント

1行のコードで、あなたのサイトに数秒でドキュメントエディターを追加

TutuDocs のドキュメントエディター(レイアウト / 表 / 画像 / アウトライン)を任意のウェブサイトに埋め込めます。訪問者はあなたのサイト上で直接ドキュメントを作成でき、テーマは設定可能、製品アップデートは自動的に反映され、あなたのメンテナンスは不要です。

ライブで試す コードを見る キーを生成(審査なし)
コピーして貼り付け — ページの </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 には幅と高さが必要です。設定時に埋め込み URL を登録し(許可リスト。ローカル開発では 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()全画面オーバーレイが閉じられました。

セキュリティ · 自動更新

  • · セルフサービス、自動承認:登録ユーザーなら誰でもコンソールでサイト名と埋め込み URL を登録すれば、即時に有効なキーを取得できます。
  • · キーは公開されており、登録 URL の許可/拒否リストで不正利用を防ぎます(拒否リストが優先)。未登録のドメインは拒否され、登録を促すメッセージが表示されます。いつでも一時停止・再開できます。
  • · 実際のオリジン統計:読み込みのたびに Origin 単位で計上され(ブロックされたものも含む)、コンソールでオリジンごとの内訳を確認でき、未登録ドメインをワンクリックで許可リストに追加できます。
  • · エディターは TutuDocs 自身のドメイン上で(分離して)動作します。あなたのページは TutuDocs の資格情報に一切アクセスできず、訪問者の TutuDocs 非公開ドキュメントが埋め込みコンポーネントに表示されることもありません。
  • · コンポーネントは TutuDocs が セルフホストし、自動更新 します —— 機能のアップグレードにあなた側のコード変更は不要で、メンテナンスはゼロです。