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

Question

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

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

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

Answer 1

在 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。

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

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

How can I display remote users cursor and selection in Quill

collaboration

operational-transform

quill