🎁 100 free AI Toolkit licenses – apply by August 15.Learn more
Tiptap 中文文档

将评论集成到您的编辑器

Available in Start plan

使用 Tiptap 评论扩展在您的编辑器中集成和管理评论。可以在编辑器中或通过 REST API 创建线程和评论。

更多详情

要获取有关如何集成、安装和配置 Tiptap 评论扩展的详细信息，请访问我们的 功能页面。

事件

Comments 扩展会触发您可以通过 editor.on() 监听的事件。这些事件对于构建自定义 UI、同步状态以及与其他扩展（如 Tracked Changes）集成非常有用。

线程事件

comments:threadCreated

当创建新的评论线程时触发。

editor.on('comments:threadCreated', ({ threadId, thread, initialComment, position, threadType }) => {
  // threadType: 'block' | 'inline'
  console.log(`线程 ${threadId} 创建于 ${position.from}-${position.to}`)
})

comments:threadUpdated

当线程的数据或元数据发生变化时触发。

editor.on('comments:threadUpdated', ({ threadId, thread, changes, updatedBy }) => {
  console.log(`线程 ${threadId} 由 ${updatedBy} 更新`)
})

comments:threadResolved

当线程被解决时触发。

editor.on('comments:threadResolved', ({ threadId, thread, resolvedBy, resolvedAt }) => {
  console.log(`线程 ${threadId} 由 ${resolvedBy} 于 ${resolvedAt} 解决`)
})

comments:threadUnresolved

当之前已解决的线程重新打开时触发。

editor.on('comments:threadUnresolved', ({ threadId, thread, unresolvedBy }) => {
  console.log(`线程 ${threadId} 由 ${unresolvedBy} 重新打开`)
})

comments:threadDeleted

当线程被删除时触发。

editor.on('comments:threadDeleted', ({ threadId, thread, deletedBy, soft }) => {
  // soft: 是否为软删除（归档）或硬删除
  console.log(`线程 ${threadId} 由 ${deletedBy} 删除`)
})

comments:threadRemovedFromDocument

当线程标记从文档中被移除时触发（例如，注释的文本被删除或线程被归档）。

editor.on('comments:threadRemovedFromDocument', ({ threadId, thread, removedBy, canRestore }) => {
  // removedBy: 'edit' | 'command'
  console.log(`线程 ${threadId} 从文档中移除`)
})

评论事件

comments:commentCreated

当向线程添加新评论时触发。

editor.on('comments:commentCreated', ({ threadId, commentId, comment, thread }) => {
  console.log(`评论 ${commentId} 添加到线程 ${threadId}`)
})

comments:commentUpdated

当评论内容被编辑时触发。

editor.on('comments:commentUpdated', ({ threadId, commentId, comment, oldContent, newContent }) => {
  console.log(`评论 ${commentId} 更新`)
})

comments:commentDeleted

当线程中的评论被删除时触发。

editor.on('comments:commentDeleted', ({ threadId, commentId, comment, deletedBy }) => {
  console.log(`评论 ${commentId} 由 ${deletedBy} 删除`)
})

选择与悬停事件

comments:threadSelected

当线程被选中时触发（例如，用户点击评论注释）。

editor.on('comments:threadSelected', ({ threadId, thread }) => {
  // 在侧边栏显示线程详情
  console.log(`线程 ${threadId} 被选中`)
})

comments:threadUnselected

当线程被取消选中时触发。

editor.on('comments:threadUnselected', ({ threadId }) => {
  console.log('线程取消选中')
})

comments:threadHovered

当用户悬停在文档中的线程注释上时触发。

editor.on('comments:threadHovered', ({ threadIds, threads }) => {
  console.log(`悬停线程: ${threadIds.join(', ')}`)
})

comments:threadUnhovered

当用户停止悬停线程注释时触发。

editor.on('comments:threadUnhovered', ({ threadIds }) => {
  console.log('线程取消悬停')
})
Previously字体颜色