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

How can I display remote users cursor and selection in Quill

我使用 Quill 的时间很短,一直专注于协作编辑工作。到目前为止它进展顺利,我有一个完全工作的协作编辑器!

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

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

在 Quill 0.20 中,有一个 example with multiple cursors working. The approach was a sibling absolutely positioned <div> that contained the cursors and synchronized with selection-change information from the editor. To not delay the 1.0 release this demo and feature was not updated with the new API but support is planned. You can try a similar approach in the meantime and of course the code is still available. You can also track the feature on Github Issues

您需要使用“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);