最近一直在和quill编辑器打交道，之前写了2篇文章，一篇是入门篇，一篇是进阶篇

传送门：

这篇文章继续总结下quill的知识点，以及我遇到的问题以及如何解决，算是对quill的一个巩固。

模块（modules）

进阶篇我们讲的自定义emoji和自定义图片，是通过quill的blot去实现的，可以自定义，定制节点。

quill里面除了这个之外，还有一个模块功能，quill内置了5个模块，它们是

toolbar 工具栏
clipboard 剪切板
history 历史
keyboard 键盘
syntax 高亮语法

这几个模块可以满足我们大部分场景。

toolbar

通过配置toolbar模块，可以很轻松配置我们的工具栏，比如加粗，下划线，标题，文字颜色等等。

它支持调用的方式有很多种：

可以直接提供对应的格式名的数组

const quill = new Quill('#editor', {
  modules: {
    toolbar: [
      // false 为默认值 
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike']
    ]
  },
  theme: 'snow'
})

也可以提供具体的dom的名称，会把dom的内容渲染成工具栏，注意⚠️dom里的元素要用ql-xxx的类名，不然不能识别。

    // dom
    <div id="toolbar">
      <select class="ql-header">
        // 默认值，提供一个value为空的属性，会当作默认值
        <option selected value=""></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
      </select>
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </div>
    const quill = new Quill('#editor', {
      modules: {
        toolbar: '#toolbar'
      },
      theme: 'snow'
    })

也可以提供对象格式，可以通过handlers定义我们的格式方法

我自己写的一个例子，当你加粗的时候，同时给字体设置一个红色

    const quill = new Quill('#editor', {
      modules: {
        toolbar: {
          container: '#toolbar',
          handlers: {
            blod () {
              // todo 可以扩展
              const { index, length } = quill.getSelection()
              if (index && length) {
                quill.format('color', 'red')
              }
            }
          }
        }
      },
      theme: 'snow'
    })

我们可以自定义我们工具栏的工具按钮，可以查看进阶篇的例子。

clipboard

剪切板模块，quill默认有一套自己的规则，会把你粘贴的东西转成对应的delta格式，然后渲染成对应的blot，最后变成对应的dom元素。

比如标题会转成header标签，如果有颜色，会设置style的color，加粗会变成strong标签。

如果你替换它默认的规则，可以通过addMatcher添加匹配替换。

比如掘金复制代码后，都会带上一段作者简介。我们可以在粘贴的时候给它加上。

匹配文本格式：

    quill.clipboard.addMatcher(Node.TEXT_NODE, function (node, delta) {
      return delta.insert(
        `\n作者：答案cp3\n来源：稀土掘金\n著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`)
    });

复制你好二字并粘贴，效果如下：

clipboard还有一个api比较常用，但是文档没有说明，那就是convert方法。可以把html内容转成delta格式。

console.log(quill.clipboard.convert('<div>答案cp3<div>')) // {ops: [{insert: '答案cp3'}]}

history

这个模块就是配合撤销和取消撤销的功能。

默认支持100个记录，默认延时1s会记录一次。还可以支持是否只记录用户的更改，默认是false。

      modules: {
          history: {
             delay: 1000, // 延时多久记录
             maxStack: 100 // 最大栈数
             userOnly: false // 用户更改
          }
        }

支持的api：

quill.history.undo() // 撤销
quill.history.redo() // 取消撤销
quill.history.clear() // 清除历史

keyboard

监听键盘快捷键，然后可以自定义我们的快捷键。这个是挺方便的。

quill默认自带一些快捷键，比如ctrl+b是加粗效果,ctrl+i是斜体效果,ctrl+u是下划线效果。

   // 监听ctrl(或commmand) + C键
    quill.keyboard.addBinding({
      key: 'C',
      shortKey: true
    }, function (range, context) {
      // range 选区 context 当前键盘上下文 
      // todo
    })

key也可以填具体的keyCode值，还支持shiftKey键，altKey键等等。

还有个参数，collapsed,如果需要选中文本才能触发，需要设置为false，如果focus就可以触发，就设置true。

如果不想限制，就不设置这个值。

syntax

语法高亮，这个需要第三方库支持

import hljs from 'highlight.js'
import 'highlight.js/styles/tomorrow.css'

modules: {
    syntax: {
      highlight: text => hljs.highlightAuto(text).value
    }
}

效果如下：

以上就是我总结的quill内置模块的内容，quill的功能还是很强大，还值得继续探索。

本文正在参加「金石计划 . 瓜分6万现金大奖」

编辑器系列-quill巩固