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

//quill 富文本配置

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'
      },
  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值