Web SDK

评论

评论功能允许用户在文档中添加评论和回复，便于团队成员之间的交流和协作。

预设模式

安装

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

使用

TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'import { UniverDocsThreadCommentPreset } from '@univerjs/preset-docs-thread-comment'import UniverPresetDocsThreadCommentZhCN from '@univerjs/preset-docs-thread-comment/locales/zh-CN'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.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(      UniverPresetDocsCoreZhCN,      UniverPresetDocsThreadCommentZhCN,     ),  },  presets: [    UniverDocsCorePreset(),    UniverDocsThreadCommentPreset(),   ],})

插件模式

安装

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/zh-CN'import ThreadCommentUIZhCN from '@univerjs/thread-comment-ui/locale/zh-CN'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.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(      ThreadCommentUIZhCN,      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

调用前同时导入通用评论 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.