vue-quill-editor 富文本编辑器禁止粘贴图片

这是今天修改的一个需求，在此记录一下。

背景

富文本编辑器已经投入使用了，但是由于用户有时候会将图片与文字直接粘贴在富文本编辑器中进行文章发表。
如果是网络图片，则没什么问题。
但是如果是本地图片，那么将会背转成 base64 格式 上传到数据库，转换成 base64 格式之后，会是非常长的字符串，体积较大，导致数据库查询缓慢。

需求

如果是复制来源于网络的文章夹杂图片，允许粘贴。
如果是复制本地文章夹杂图片，禁止图片粘贴。

解决

因此去看了 vue-quill-editor 的文档
在 vue-quill-editor 的配置项中 ， 可添加粘贴板事件

 data() {
    return {
      content: ``, // 富文本编辑器默认内容
      editorOption: {
        //  富文本编辑器配置
        modules: {
          clipboard: {
              // 粘贴版，处理粘贴时候带图片
              matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
            },
          //工具栏定义的
          toolbar: toolbarOptions
        },
        //主题
        theme: "snow",
        placeholder: "请输入正文"
      }
    };
  },

然后观察了本地和网络图片在粘贴至富文本编辑器路径的区别，有地址的网络图片的
src是以http或者https开头，而本地的则是以 file:// 开头
所以可以在这里作为突破口去辨别是否是本地资源图片

handleCustomMatcher (node, Delta) {
    let ops = []
    Delta.ops.forEach(op => {
        if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片，这里会是一个对象，所以可以这样处理
            ops.push({
                insert: op.insert,
            })
        } else {
            if (op.insert.image.includes('file://')) {  //本地图片会使文件file开头
                this.$message.warning('不允许粘贴图片,请手动上传')
            } else {
                ops.push({
                    insert: op.insert,
                })
            }
        }
    })
    Delta.ops = ops
    return Delta
}

在逻辑中，首先区分了是否粘贴了图片，然后在带有图片中又区分了是否是本地图片，如果是本地图片，则不予添加至文本域，提示 '不允许粘贴图片,请手动上传'

至此就解决掉了这个小小小问题 ！！ 886