Web SDK

コメント

コメント機能を使うと、ドキュメント内にコメントや返信を追加でき、チーム内のコミュニケーションやコラボレーションを円滑にします。

プラグインモード

インストール

Shell
pnpm add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-ui

使い方

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsThreadCommentPlugin } from '@univerjs/docs-thread-comment'import { UniverDocsThreadCommentUIPlugin } from '@univerjs/docs-thread-comment-ui'import { UniverThreadCommentPlugin } from '@univerjs/thread-comment'import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui'import DocsCommentLocale from '@univerjs/docs-thread-comment-ui/locale/ja-JP'import ThreadCommentUIJaJP from '@univerjs/thread-comment-ui/locale/ja-JP'import '@univerjs/docs-thread-comment/facade'import '@univerjs/docs-thread-comment-ui/lib/index.css'import '@univerjs/thread-comment-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      ThreadCommentUIJaJP,      DocsCommentLocale,     ),  },})univer.registerPlugin(UniverThreadCommentPlugin)univer.registerPlugin(UniverThreadCommentUIPlugin)univer.registerPlugin(UniverDocsThreadCommentPlugin)univer.registerPlugin(UniverDocsThreadCommentUIPlugin)

共同編集機能と併用する場合

共同編集 機能を使う場合は、次のように設定します。

Shell
pnpm add @univerjs-pro/thread-comment-datasource
TypeScript
import { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource'univer.registerPlugin(UniverThreadCommentDataSourcePlugin)

モバイル対応

まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

パッケージデスクトップの登録モバイルの登録
@univerjs/docs-thread-comment-uiUniverDocsThreadCommentUIPluginUniverDocsThreadCommentMobileUIPlugin
@univerjs/thread-comment-uiUniverThreadCommentUIPluginUniverThreadCommentMobileUIPlugin

プリセットモード

インストール

Shell
pnpm add @univerjs/preset-docs-thread-comment

使い方

TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreJaJP from '@univerjs/preset-docs-core/locales/ja-JP'import { UniverDocsThreadCommentPreset } from '@univerjs/preset-docs-thread-comment'import UniverPresetDocsThreadCommentJaJP from '@univerjs/preset-docs-thread-comment/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'import '@univerjs/preset-docs-thread-comment/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      UniverPresetDocsCoreJaJP,      UniverPresetDocsThreadCommentJaJP,     ),  },  presets: [    UniverDocsCorePreset(),    UniverDocsThreadCommentPreset(),   ],})

コメント Facade

共通のコメント Facade と製品 Facade を両方インポートします。製品のメソッドは安定したアンカーを作成し、共通 API は返信・更新・解決・削除を扱います。getComments() はローカル状態を読み取ります。listCommentsAsync() は設定済みデータソースを通じて既知のスレッドを同期し、サーバー上の全スレッドを検索するものではありません。

TypeScript
import '@univerjs/thread-comment/facade'import '@univerjs/docs-thread-comment/facade'const range = univerAPI.getActiveDocument()?.getTextRange(0, 1)if (range) {  await range.createCommentAsync('Please review this text.')  console.log(await range.listCommentsAsync())}
TypeScript
import '@univerjs/thread-comment/facade'const [thread] = univerAPI.getComments({ resolved: false })if (thread) {  await univerAPI.replyCommentAsync({    unitId: thread.unitId,    subUnitId: thread.subUnitId,    threadId: thread.threadId,    content: 'Reviewed.',  })}

共有ディスカッション

Server SDK で Comment Service と Endpoint を統合し、共同編集とライセンスの設定後に @univerjs-pro/thread-comment-datasource の UniverThreadCommentDataSourcePlugin を登録します。付属のデータソースは /universer-api/comment/unit/{unitId}/... と /universer-api/user/list を使います。アプリからこれらのルートを公開してください。サーバーは文書の編集権限とは別に、コメントの読み書きを認可する必要があります。

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.