likes
comments
collection

编辑器系列-quill进阶

作者站长头像
站长
· 阅读数 16

上一篇文章我们讲了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内容里

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

我们调用的时候执行quillinsertEmbed方法,这个是插入嵌入对象方法

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

emoji下拉列表的效果: 编辑器系列-quill进阶

emoji插入的效果: 编辑器系列-quill进阶

自定义图片

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)

modulestoolbar工具栏中定义插入图片方法,也就是下面的handlers对象

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

      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)
            }
          }
        }
      }

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

编辑器系列-quill进阶

总结

quill的功能强大在于你可以很容易通过它提供的api来扩展你的功能,上面是我用2个例子讲解它的这个扩展功能,你们也可以实现。

quill还有很多实用的api,等着你发掘。

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