quilljs编辑器禁止粘贴图片到编辑框的方法

作者吱托邦发表于 2023-04-26 15:06:39 更新于 2023-06-27 14:41:59 分类于观察评论数： 1.7k

quilljs是前端开发中比较常用并且经典的一个富文本编辑器，自带丰富的功能，在vuejs项目中也有着广泛的使用。不过最近在项目实现过程中遇到一个问题，这个问题的根源在于，quill编辑器会将用户粘贴进来的图片转换成base64格式，并保存到生成的html字符串中。而这个生成的html字符串最终会通过接口发送到服务器，保存在数据库中。可是图片被转为base64格式之后，是很长的一段字符串，会导致整个html字符串的长度超出数据库字段类型的存储上限，从而导致系统报错。

quilljs禁止粘贴图片的具体情形

这个问题仅限于用户使用鼠标右键或者ctrl+v的形式将图片粘贴到quill富文本编辑器中，具体原因如前所述，粘贴进来的图片被转为了base64格式，导致数据太大，超出数据库字段的最大上限。

而通过点击富文本编辑器的工具栏中的图片上传按钮来插入图片的话，是会将图片通过接口直接上传到后台，后台会返回该图片的url，最终quill将该url插入到html字符串中，因此通过点击工具栏图片上传按钮来插入图片是不会导致这类问题发生的。

那么我们现在要做的就是如何禁止用户通过复制粘贴的方式将图片粘贴到编辑器中。网上的方法大概有几种，比如通过quilljs的matcher匹配器、通过window.addeventlisenter监听剪切板粘贴事件等等方式，但是经过实践之后，这些方法都是存在一定问题的，无法达到要求甚至完全无效。

比如quill的matcher可能因为版本兼容问题，导致无法响应该匹配器，并且quill的匹配器只能添加不能覆盖，因此它原本将图片转base64的匹配器还是在执行工作的。

而window.addeventlisenter监听剪切板粘贴事件这种方式问题很大，因为现在一些浏览器对复制粘贴内容到浏览器中有比较严格的控制，所以通过监听粘贴事件无法获取到实际内容，而且windows系统中本身就无法通过监听剪切板粘贴事件来获取到图片数据。使用目前网络上现有的一些方法，其实是无法获取到有用的信息，无法解决该问题。

quill禁止粘贴图片方法

经过自己的研究，发现在quill自带的text-change监听方法中，可以对Delta类型的数据进行处理，因此我们可以从这里下手。Delta类型数据是什么，大家可以自己查找相关资料了解一下。

this.Quill.on('text-change', (delta, oldDelta, source) => {
  for (let i=0;i<delta.ops.length;i++){
    if (delta.ops?.[i]?.insert?.image?.includes('data:image/')){
      this.Quill.setContents(oldDelta)
      this.Quill.setSelection(this.Quill.getLength() + 1)
    }
  }
  this.$emit('on-text-change', delta, oldDelta, source)
})

核心代码其实就只有上面几行，我们通过监听text-change，如果quill中内容发生了变化，就会执行该回调函数。在该回调函数中，我们轮询判断delta对象中的ops数组内容。如果ops中存在insert的记录，并且该insert记录的内容是插入了一张图片，并且该插入的图片包含了data:image/字符串，说明编辑器中被用户粘贴进来了一张图片。因为前面已经说了，用户粘贴进来的图片会被quill转为base64格式图片。

通过这一系列判断之后，如果发现用户确实粘贴了图片进来，那我我们就将编辑器的内容直接设置为oldDelta（粘贴图片之前的数据），并且将编辑器光标挪到内容的最后即可。如果经过一系列判断之后，并没有发现用户粘贴了图片进来，那么就按照正常的流程走即可。

*该文章原创并发表于吱托邦网站，未经允许禁止转载！