collaboration - 如何在 Quill 中显示远程用户的光标和选择

Question

我与Quill合作了很短的时间，一直专注于让协作编辑工作。到目前为止一切顺利，我有一个完全可以工作的协作编辑器！

我想显示其他用户的选择和光标位置，但我想不出如何用 Quill 正确解决这个问题。

我本质上想向呈现的文档添加标记，而不向实际的文档模型添加任何内容。这可能吗？我应该从哪里开始？

Answer 1

在 Quill 0.20 中，有一个使用多个游标工作的示例。该方法是一个绝对定位的兄弟<div>，包含光标并与selection-change来自编辑器的信息同步。为了不延迟 1.0 版本的发布，此演示和功能未使用新 API 进行更新，但计划提供支持。您可以同时尝试类似的方法，当然代码仍然可用。您还可以在Github 问题上跟踪该功能。

Answer 2

您需要使用“quill-cursors”包，然后监听 selection-change 事件：

 editor.on("selection-change", function (range, oldRange, source) {
    console.log("Local cursor change: ", range); 
 });

然后将此数据广播给其他远程用户，然后渲染远程光标：

const cursors = editor.getModule("cursors");
cursors.createCursor(id, user.name, userColor);
cursors.moveCursor(id, cursorRange); // <== cursor data from previous step
cursors.toggleFlag(id, true);