最近使用Yjs给自己开源的一个思维导图加上了协同编辑的功能，得益于该框架的强大，一直觉得很复杂的协同编辑能力没想到实现起来异常的简单，所以通过本文来安利给各位。 要实现协同编辑，目前主要有两种算法，一是OT（OperationalTransformation），二是CRDT（Conflict-freeReplicatedDataType），目前用的更多的是OT，它需要通过服务端来处理冲突，并将处理后的数据发送到各个端进行同步，CRDT也支持这种模式，另外还支持直接在客户端处理冲突，然后通过点对点通信同步到其他客户端。 OT是对编辑的数据操作进行转换，所以OT算法的实现依赖于编辑器数据模型的设计...

最近使用Yjs给自己开源的一个思维导图加上了协同编辑的功能，得益于该框架的强大，一直觉得很复杂的协同编辑能力没想到实现起来异常的简单，所以通过本文来安利给各位。 要实现协同编辑，目前主要有两种算法，一是OT（OperationalTransformation），二是CRDT（Conflict-freeReplicatedDataType），目前用的更多的是OT，它需要通过服务端来处理冲突，并将处理后的数据发送到各个端进行同步，CRDT也支持这种模式，另外还支持直接在客户端处理冲突，然后通过点对点通信同步到其他客户端。 OT是对编辑的数据操作进行转换，所以OT算法的实现依赖于编辑器数据模型的设计...

说到json格式化你肯定很熟悉，毕竟压缩后的json数据基本不可读，为了方便查看，我们可以在编辑器中可以通过插件一键格式化，也可以通过一些在线工具来美化，当然，有时在开发中也会遇到json格式化的需求，有很多开源库或组件能我们解决这个问题，不过并不妨碍我们自己实现一个。 最简单的方式应该就是使用JSON.stringify()方法了，可以通过它的第三个参数控制缩进的空格数： JSON.stringify(json,null,4) 不过它也只能帮你缩进一下，想要再多就没有了，靠它不如靠己，接下来我们就来实现一个相对完善的json格式化工具。 创建一个类 我们的类暂时只接收一个参数，那就是容器...

dom-to-image库可以帮你把dom节点转换为图片，它的核心原理很简单，就是利用svg的foreignObject标签能嵌入html的特性，然后通过img标签加载svg，最后再通过canvas绘制img实现导出，好了，本文到此结束。 另一个知名的html2canvas库其实也支持这种方式。 虽然原理很简单，但是dom-to-image毕竟也有1000多行代码，所以我很好奇它具体都做了哪些事情，本文就来详细剖析一下，需要说明的是dom-to-image库已经六七年前没有更新了，可能有点过时，所以我们要看的是基于它修改的dom-to-image-more库，这个库修复了一些bug，以及增加了...