theme: smartblue

上一篇文章我们讲了quill的使用，只算是对quill，parchment, blot的简单了解，感兴趣可以点击看看《编辑器系列-初探quill》。

但是quill的强大之处在于它易于扩展，自定义模块，自定义blot等等，下面开始我们的quill的进阶学习。

进阶

自定义emoji

我们看一般编辑器都支持添加emoji，quill默认是没有的，那么我们来看看如何实现添加emoji。

quill的工具栏那些格式，比如加粗，h1标题，颜色，列表都是内置格式，它们都是通过定义blot来实现的。我们也采取这种形式。

上一篇文章我们讲了blot的扩展，定义了blot格式，插入的时候就会按照我们定义的标签替换。

我们先定义emoji的blot格式：

    const Inline = Quill.import('blots/inline')
    class Emoji extends Inline {
      static blotName = 'emoji'; // blot的名称，需要唯一，防止冲突
      static tagName = 'span'; // 渲染的标签名
      static create (value) {
        const dom = super.create(value)
        dom.innerText = value
        return dom
      }
    }
    Quill.register({ 'formats/emoji': Emoji }, true)

我们是在inline的blot上面扩展的，内联，标签是span。

当插入一个emoji，会调用create静态方法，我们把emoji替换到span内容里

最后把它注册到工具栏下，才会生效。

我们调用的时候执行quill的insertEmbed方法，这个是插入嵌入对象方法

const { index, length } = quill.getSelection(true) // 获取光标位置
quill.insertEmbed(index + length, 'emoji', emoji, 'user') // emoji为具体的emoji

emoji下拉列表的效果：

emoji插入的效果：

自定义图片

quill默认是支持插入图片，但是你们有自定义的需求，比如需要添加自定义属性，也是可以扩展的。

我们需要引入formats的image，通过继承它进行扩展。

然后定义create方法（静态），formats方法（静态），以及value方法（静态），最后也要注册到formats里，这个格式才会生效。

代码如下：

    const Image = Quill.import('formats/image')
    class CustomImage extends Image {
      static blotName = 'customImage'; // blot的名称，需要唯一
      static tagName = 'img'; // 渲染的标签名
      static create (value) {
        const dom = super.create()
        dom.setAttribute('src', value.src)
        dom.setAttribute('tag', value.tag)
        dom.setAttribute('width', value.width)
        dom.setAttribute('height', value.height)
        return dom
      }
      // 定义delta的blot的attribute格式
      static formats (node) {
        return {
          src: node.getAttribute('src'),
          tag: node.getAttribute('tag'),
          width: node.getAttribute('width'),
          height: node.getAttribute('height')
        }
      }
      // 定义delta的blot具体的value
      static value (node) {
        return {
          src: node.getAttribute('src')
        }
      }
    }
    Quill.register({ 'formats/customImage': CustomImage }, true)

在modules的toolbar工具栏中定义插入图片方法，也就是下面的handlers对象

也是通过调用quill的insertEmbed方法实现的。

      modules: {
        toolbar: {
          container: '#toolbar',
          handlers: {
            'customImage' () {
              const { index, length } = quill.getSelection()
              quill.insertEmbed(index + length, 'customImage', {
                src: 'https://octodex.github.com/images/labtocat.png',
                width: '64px',
                height: '64px',
                tag: 'customTag'
              })
              quill.setSelection(index + length + 1)
            }
          }
        }
      }

实现的效果是，点击工具栏的图片，就会插入一张图片，如下：