当前位置: 首页 > 工具软件 > for-editor > 使用案例 >

vue-quill-editor 字体样式失效

汲时铭
2023-12-01

最近使用vue-quill-editor,发现字体加粗、斜体、颜色都失效了,排查并没有样式冲突。

后来发现是由于处理粘贴内容的时候,处理insert的时候把样式去除了

clipboard: {
 // 粘贴版,处理粘贴时候带图片
  matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
},


handleCustomMatcher(node, Delta) { // 处理粘贴图片大小问题
      let ops = []
      for(let i = 0; i < Delta.ops.length; i++){
        let op = Delta.ops[i]
          if (op.insert.image && isBase64(op.insert.image)) {  
                // 判断图片大小
                let file = base64toFile(op.insert.image)
                  // 判断图片大小
                if(this.beforeAvatarUpload(file)){
                  ops.push({
                      insert: op.insert,
                  })
                }else{
                  ops.push({
                      insert: '',
                  })
                }
                // this.$message.warning('不允许粘贴图片,请手动上传')
                // this.dealClipImage(op)
              } else {
                  ops.push({
                      insert: op.insert,
                  })
              }
      }
      Delta.ops = ops
      return Delta
    },

改成下面就可以了

handleCustomMatcher(node, Delta) {
      let ops = []
      for(let i = 0; i < Delta.ops.length; i++){
        let op = Delta.ops[i]
          if (op.insert.image && isBase64(op.insert.image)) {  
                // 判断图片大小
                let file = base64toFile(op.insert.image)
                  // 判断图片大小
                if(this.beforeAvatarUpload(file)){
                  ops.push({
                      // insert: op.insert,
                      ...op
                  })
                }else{
                  ops.push({
                      insert: '',
                  })
                }
                // this.$message.warning('不允许粘贴图片,请手动上传')
                // this.dealClipImage(op)
              } else {
                  ops.push({
                      // insert: op.insert,
                      ...op
                  })
              }
      }
      Delta.ops = ops
      return Delta
    },

 类似资料: