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

Question

我已经与Quill合作了很短的时间，并且一直专注于协作编辑工作。到目前为止，一切进展顺利，我有一个完全有效的协作编辑！

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

我本质上希望将标记添加到渲染的文档中，而无需在实际文档模型中添加任何内容。这可能吗？我应该从哪里开始？

Answer 1

您需要使用" Quill-Cursors"包装，然后收听选择变更事件：

 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);

Answer 2

在quill 0.20中，有一个示例，有多个光标工作。该方法是一种绝对定位的<div>的兄弟姐妹，其中包含光标，并与编辑器的selection-change信息同步。不要延迟1.0发布此演示和功能，并没有使用新的API进行更新，但已计划支持。您可以在此期间尝试类似的方法，当然，代码仍然可用。您还可以在GitHub问题上跟踪该功能。