协同编辑这座大山，怕投入与产出不成正比，所以迟迟不敢下手。翻越这座大山

最近使用 yjs 给我们的思维导图加上了协同编辑的功能，效果如下面动图所示。是不是挺有意思的，其实实现起来很简单，yjs 已经帮我们做了很多事情，我们只需要简单的引用即可。

那么接下来同我一起揭秘 yjs 的奥秘吧！

# 实现脑图协同编辑

上一篇文章之前我们有讲过，Yjs 绑定编辑器的过程：

首先将协同数据和编辑器数据进行绑定，监听编辑器数据变化，通过 Network Provider 将协同数据同步到所有副本，各副本接收到协同数据变化后再转化为编辑器数据，利用自身的 API 将变化填充到编辑器中，从而实现协同编辑。

1. 创建 yjs 文档，用于保存共享数据；
2. 创建 ytext 对象，用于表示文本的共享数据结构；
3. 通过 QuillBinding 将 ytext 与 Quill 编辑器保持同步（在 QuillBinding 方法中实现脑图数据与协同数据的转换，以及 awareness 的实现。）。

想要实现脑图的协同编辑，我们可以仿照 quill 的协同过程来实现。不过与 quill 不同的是，脑图的感知信息思维显示其他协作者的实时鼠标位置其实没有必要，因为大多数操作都是要在选中节点的情况下进行的，所以只要在激活的节点上显示激活该节点的协作人员信息即可，同样有相关的事件可以监听：

主要是用来提示当前这里谁在编辑，你就不要过来了，虽说冲突可以被处理掉，但是实际上大多数时候的协同编辑都是大家一起编辑一个文档不同的部分，而不是一起互相制造冲突，那样可能会打起来，效率反而低了。

可以通过 awareness 属性获取 Connection Provider 提供的感知数据处理对象，然后在节点的激活事件回调函数中设置或更新协作人员激活的节点列表，同样，awareness 也提供了监听其他协作者感知数据改变的方法：

# 如何实现自定义的绑定器

首先我们可以 copy 一份y-quill的源码

京ICP备2022027737号
Copyright © 2022 - present @wangxiang