Vue + vue-quill-editor富文本禁止粘贴图片，只能上传，补充回显自己上传图片失败的解决办法

开发过程中，使用到了富文本编辑器，因为要限制富文本大小，所以禁止用户粘贴图片，需要图片只能上传保存路径，所以禁止粘贴图片

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

富文本配置

editorOption: {
         placeholder: '',//
          modules:{
            clipboard: {
              // 粘贴版，处理粘贴时候带图片
              matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
            },
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
                ['blockquote'],     //引用，代码块
                [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
                [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
                ['image']    //上传图片、上传视频
              ],
              handlers: {
                  'image': function (value) {
                      if (value) {
                          // 触发input框选择图片文件
                          document.querySelector('.avatar-uploader input').click()
                      } else {
                          this.quill.format('image', false);
                      }
                  }
              }
            }
        },
        theme:'snow'
      },

以上参考链接： 原文链接：https://blog.csdn.net/weixin_45370366/article/details/109641110

补充： 禁止粘贴图片的问题解决了

----------------but-----------------------------事情显然没有这么简单-------------------------------------------------------

但是在对富文本进行内容回显时，发现原本上传的图片也会被上述方法给过滤掉

----------------我就说------------------------吧----------------------------------------------------------------------------------

检查是在赋值的过程中，触发了上述方法，即赋值和粘贴操作都会触发禁止粘贴图片的方法，导致图片被过滤掉

解决思路，暂时屏蔽这个方法的过滤，等到回显内容完成后再开启过滤

来咯

// 定义一个变量挂载到window上
// why？ 因为在data里定义的数据在方法里访问不到， 可能是我vegetable,  不可能
window.showData = false
//  ---------------------------------------
handleCustomMatcher(node, Delta) {
            console.log(window.showData)
            // 根据自己定义window.showData进行判断是否开启禁止粘贴的过滤方法
            if (!window.showData) {
                return Delta
            }
            let ops = []
            Delta.ops.forEach(op => {
                if (op.insert && typeof op.insert === 'string') { // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
                    ops.push({
                        insert: op.insert
                    })
                } else {
                    this.$message({
                        message: '不允许粘贴图片,请手动上传',
                        type: 'warning'
                    })
                }
            })
            Delta.ops = ops
            return Delta
        },
        // 获取详情
        getDetail() {
            // 这里是一万行回显代码
            // 回显完成改变window.showData的值 开启禁止粘贴方法
           setTimeout(() => {
                window.showData = true
            })
        },
// 如果有需要，记得自己重置window.showData的默认值为false