【华为云技术分享】现代富文本编辑器Quill的模块化机制-优快云博客

DevUI是一支兼具设计视角和工程视角的团队，服务于华为云DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。

官方网站：devui.design

Ng组件库：ng-devui(欢迎Star)

引言

本文基于DevUI的富文本编辑器开发实践和Quill源码写成。

EditorX是DevUI开发的一款好用、易用、功能强大的富文本编辑器，它的底层基于Quill，并对其做了大量扩展，以增强编辑器的能力。

Quill是一款API驱动、支持格式和模块定制的开源Web富文本编辑器，目前在Github的Star数超过25k。

如果还没有接触过Quill，建议先去Quill官网了解下它的基本概念。

通过阅读本文，你将收获：

了解Quill模块是什么，怎么配置Quill模块
为什么要创建Quill模块，怎么创建自定义Quill模块
Quill模块如何与Quill进行通信
深入了解Quill的模块化机制

Quill模块初探

使用Quill开发过富文本应用的人，应该都对Quill的模块有所了解。

比如，当我们需要定制自己的工具栏按钮时，会配置工具栏模块：

var quill = new Quill('#editor', {

  theme: 'snow',

  modules: {

    toolbar: [['bold', 'italic'], ['link', 'image']]

  }

});

其中的modules参数就是用来配置模块的。

toolbar参数用来配置工具栏模块，这里传入一个二维数组，表示分组后的工具栏按钮。

渲染出来的编辑器将包含4个工具栏按钮：

要看以上Demo，请怒戳配置工具栏模块。

Quill模块是一个普通的JS类

那么Quill模块是什么呢？我们为什么要了解和使用Quill模块呢？

Quill模块其实就是一个普通的JavaScript类，有构造函数，有成员变量，有方法。

以下是工具栏模块的大致源码结构：

class Toolbar {

  constructor(quill, options) {

    // 解析传入模块的工具栏配置(就是前面介绍的二维数组)，并渲染工具栏

  }





  addHandler(format, handler) {

    this.handlers[format] = handler;

  }

  ...

}

可以看到工具栏模块就是一个普通的JS类。在构造函数中传入了quill的实例和options配置，模块类拿到quill实例就可以对编辑器进行控制和操作。

比如：工具栏模块会根据options配置构造工具栏容器，将按钮/下拉框等元素填充到该容器中，并绑定按钮/下拉框的处理事件。最终的结果就是在编辑器主体上方渲染了一个工具栏，可以通过工具栏按钮/下拉框给编辑器内的元素设置格式，或者在编辑器中插入新元素。

Quill模块的功能很强大，我们可以利用它来扩展编辑器的能力，实现我们想要的功能。

除了工具栏模块之外，Quill还内置了一些很实用的模块，我们一起来看看吧。