安装“跟踪更改”扩展
Paid add-on
安装并配置 Tracked Changes 扩展,按照本指南操作。
安装
npm install @tiptap-pro/extension-tracked-changes基本设置
import { Editor } from '@tiptap/core'
import { TrackedChanges } from '@tiptap-pro/extension-tracked-changes'
const editor = new Editor({
extensions: [
TrackedChanges.configure({
enabled: true,
userId: 'user-123',
userMetadata: { name: 'John Doe' },
}),
],
})设置
enabled
启用或禁用跟踪更改模式。启用时,所有编辑都会变成建议,而不是直接更改。
默认值:false
TrackedChanges.configure({
enabled: true,
})userId
当前进行建议的用户 ID。应来自您的身份验证系统。
默认值:'anonymous'
TrackedChanges.configure({
userId: 'user-123',
})userMetadata
关于当前用户的任意元数据,作为 JSON 可序列化对象存储在每个建议中。用于存储显示名称、头像或其他自定义数据,无需单独的用户存储。
默认值:null
TrackedChanges.configure({
userId: 'user-123',
userMetadata: {
name: 'John Doe',
avatar: 'https://example.com/avatar.jpg',
role: 'editor',
},
})onSuggestionCreate
创建新建议时触发的回调。接收包含 id、type、userId、createdAt、from、to 和 text 的建议对象。
默认值:undefined
TrackedChanges.configure({
onSuggestionCreate: (suggestion) => {
console.log('已创建新建议:', suggestion)
// 更新你的界面,通知其他用户等。
},
})onSuggestionAccept
接受建议时触发的回调。接收建议 ID。
默认值:undefined
TrackedChanges.configure({
onSuggestionAccept: (id) => {
console.log('建议已接受:', id)
},
})onSuggestionReject
拒绝建议时触发的回调。接收建议 ID。
默认值:undefined
TrackedChanges.configure({
onSuggestionReject: (id) => {
console.log('建议已拒绝:', id)
},
})