tiptap 合作编辑光标
此扩展提供了关于所有连接用户的详细信息(如姓名、特定颜色),以及他们当前的光标位置和文本选择(如果有)。请在多个浏览器窗口打开此页面进行测试。
安装
npm install @tiptap/extension-collaboration-cursor
这个扩展需要 Collaboration
扩展。
配置
provider
Y.js 网络提供器,例如 y-websocket 实例。
默认值:null
user
当前用户的属性,通常包含名称和颜色,但也可以使用任何属性。这些值会与所有其他连接客户端同步。
默认值:{ user: null, color: null }
render
光标的渲染函数,查看扩展源代码示例。
selectionRender
选择区域的渲染函数,同样查看 扩展源代码 。
命令
updateUser()
传入包含当前用户更新属性的对象。期望有 name
和 color
字段,但也可以添加更多字段。
editor.commands.updateUser({
name: "John Doe",
color: "#000000",
avatar: "https://unavatar.io/github/ueberdosis",
});
源代码
packages/extension-collaboration-cursor/
使用方法
警告 公开 此编辑器的内容与其他用户共享。