×

富文本编辑器--选型

96
minxuan
2018.06.23 15:28* 字数 648

现有问题

团队的业务多为后台管理系统,部分业务需要使用富文本编辑器。早期团队选用了百度编辑器,但存在bug多、无人维护、扩展性差等问题,且后续业需要更灵活的编辑器。为了解决这些问题,决定重选编辑器。

选择:Quill

基于以下原因,笔者决定使用Quill来开发团队的编辑器组件:
1. Delta和API
Quill返回json结构的数据,有API操作编辑器内部元素。也可以通过innerHtml获取dom。
2. 可定制
Quill可以修改、扩展现有的模块,也可以添加新的模块,甚至可以在parchment的基础上全部重写。有较强的灵活性。
3. 兼容性
当前版本兼容Chrome、IE11、Edge,已满足业务需求。
4. 与其他编辑器比较
相比CKEditor、TinyMCE等传统编辑器,有更好的API和定制功能。而Draft是基于React的编辑器,需要自己实现数据层的内容,使用成本更高。国内的wangEditor功能比较全面,但不具备扩展性。

难点

  1. Quill的文档为英文文档,且部分内容写得不太深入(比如用于扩展blot的parchment),对于开发者或后期维护者都有较高的学习成本。当然如果你只需要实现编辑器最基本的功能,参考Quill官方例子即可。
  2. 定制模块,直接设置元素样式比较简单,但操作编辑器内部DOM比较难。
  3. 如果要实现更灵活的定制,需要更多地了解Quill的源码和Parchment。

开发/重写的功能模块

1. 基础文本模块
分割线、格式刷、段落、撤回和重做
2. 多媒体模块
图片上传模块
3. 其他模块
工具栏的Tooltip模块
4. 预览功能

图片上传

图片上传主要取决于业务需求,我们可以改写图片的handler方法,打开一个模态框或者打开本地文件夹,调接口上传图片。通用点是保存的时候,用Delta保留前面的内容并插入图片内容,最后更新Quill。

  saveImg (imgList) {
        let range = this.quill.getSelection(true)
        let changeDelta = new Delta().retain(range.index)
          .delete(range.length)
        imgList.forEach((item) => {
          changeDelta.insert({ image: item })
        })
        this.quill.updateContents(changeDelta, Quill.sources.USER)
        this.quill.setSelection(range.index + imgList.length, Quill.sources.SILENT)
      }

由于图片上传、预览主要取决于业务需求,与编辑器关系不大,后面不再提到。

最终效果

编辑器

预览
Quill编辑器
Web note ad 1