第一节 QuillJS的介绍-FelixCoder

时间:2021-1-8 作者:admin

一.为什么讲QuillJS

    由于公司的业务的需要, 需要寻找一款偏底层,好扩展的富文本编辑器,由于项目是基于react,所以首先考虑到的draftjs和slatejs 。 我们项目的需求特别复杂,draftjs应用起来总感觉性能不好,容易跳光标。slatejs感觉有些功能(拖拽)不太好实现,没有那么方便。

    最后我发现了QuillJS,做完一个项目后,更加坚定了我的选择,代码结构清晰,让人眼前一亮,虽然Quill初次使用,不太好理解,detla, blot,这些概念容易混淆。官方文档过于简单。 但源码就是最好的答案。 读完源码后,起初不太会用的东西,碰到很多坑,现在都可以理解了。 但不可否认,Quill也不是最完美的,还有很多可以改进的地方。所以将我的理解分享给大家,避免碰到一些弯路,过于简单的使用,我不会讲,大家可以去官方文档看,我会从源码的角度,讲比较深入的细节。涉及模块开发,怎么设计一个自定义的Module和Blot,怎么把React组件嵌入在QuillJS里面,怎么构建一个子编辑区域等等,如有说的不当之处,请大家指正,谢谢大家。

二.QuillJS架构简介

从以上图中可以看出主要构成有5大块,我从下到上这边分别介绍一下:

1.Core Class (核心类)

     这块主要是QuillJS的核心类,包含Selection光标处理,一些基类比如Mdeule模块管理的基类。emitter用于事件处理,处理quill的核心事件的定义比如editor-change,text-change的事件的定义,一个典型的pubSub模式。

** 2. Parchment(抽象文档模型) **

    Quill并没用使用浏览器的dom原有的文档模型。它自己抽象了一套基于dom的文档模型,Parchment由Blot组成,Blot有很多种纯文本的Blot是textBlot, 块级的是blockBlot,inlineBlot是内联的,可以被嵌套嵌套的,embedBlot是用于多媒体图片视频等等,并且每种Blot有自己的生命周期。Parchment被放在另一个git仓库中。后面会有一节单独讲Parchment。 

** 3. Modules(自带模块) **

    Quill还是给我们提供了一些基础模块,这些模块拿来即用。工具栏,表格,代码片段显示,剪切板,上传,键盘事件监听等等。拥有这些基本模块,其实不定制开发的话,就可以使用了。 

** 4. Blots(抽象文档实现)**

   Parchment这边定义blot的基础类,一些核心基类(ShadowBlot)和接口定义都在Parchment这边。具体Blots实现是在Quill这边。在Quill内做自定义开发,我们一般不直接操作Dom,都是通过blot去操作,blot里提供很多dom相似的方法和属性,比如parent(父节点),next(获取下一个节点),prev(上一个节点),appendChild添加子节点等等。他不是严格意义上的虚拟dom。每次操作更新只会影响当前的node节点。 

**5.Delta(Json文档数据上文描述) **

    它维护用户整个操作关系,虽然是一个扁平的json, 但他巧妙利用了attributes和插入顺序来描述结构关系。后面一节会细讲。下面是一个delta操作例子讲解:

const delta = new Delta().retain(7,{ bold:true })
                     .retain(5)
                     .insert('White', { color: '#fff' })
                         .delete(4);

retain(7,{ bold:null, italic:true})表示保留编辑器中索引为0 -7之间的blots, 并format样式加粗
retain(5) 保留编辑器中索引为0 -5之间的blots
insert(‘white’, { color: ‘#fff’ }) 表示接上一次操作后,插入文字’white’, 并对其应用format 文字颜色为#fff
delete(4) 表示接上一个操作后,删除4个blots

delta操作有两层含义,第一可描述文档整个上下文关系,这样可以很好的回退和撤销。

从CoreClass中的history类里面的源代码可以看出

其中将delta源数据最后一位pop出后在做updateContents更新。

还有一层含义,就是通过quill的getContents方法,导出一份干净的json形式的Delta对象结构关系。可以存在mysql或mongo中,以便恢复和保存数据。

三,结语:

     本次文章,先抛个砖,下一节,我们讲一下parchment,以及blot的生命周期,和blot基本操作。还有源码跟踪blot整个结构是怎么样的。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。