石墨文档是一款非常优秀的在线编辑器,在做编辑器的时候,发现石墨文档用的是 Quill,不过肯定是在 Quill 的基础上进行了二次开发,对源码进行了大量的修改。
那我们简单聊聊 Quill,以及我在做在线编辑遇到的一些坑。
Quill 是一款开源的编辑器,star32k,目前已经处于停止维护的状态,能满足 90% 的编辑场景需求,支持公式、图片、文本等常用编辑功能,但官方并没有提供功能比较完善的表格编辑能力,而石墨文档的表格编辑非常好用,给大家截个图:
说起表格编辑,实现起来并不容易,花点时间也能搞定。国内有位小伙伴给quill写了一个更好用的表格编辑插件better-table,其实并不better,在使用过程中会发现好多莫名其妙的问题,而且不太好解决。不过作者能够把自己的实现思路开源出来,还是非常不错的。
如果你正好用 quill 进行二次开发,不建议使用 better-table,建议参考 better-table 的实现原理然后重写,重写的过程中可以参考石墨文档的实现方式。这样当你实现了表格编辑功能,其实对 Quill 的核心原理有了自己的理解。
可能有人会问了,我咋么能知道石墨文档实现原理呢?可以在 Quill 的源码中找一个方法,然后打个断点,比如我找了个 update 的方法:
其实这里的 this 就是 Quill 的实例。我们调用几个方法看看:
再看下 Quill 的数据源:
总的来说,编辑器实现起来非常难。Quill 中的概念比较抽象,一时半会很难搞懂它的实现原理,里面有非常多你没接触过的概念,比如Format、Parchement、Delta。
本文主要给大家提供个编辑器的实现思路。大家加油。
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端
官网:https://lefex.gitee.io/