Bootstrap

quill富文本编辑器复制文字去除文本自带样式

在复制带有样式的文字时,会将样式也复制过来比如背景色字体颜色,去除复制过来的文字样式通常是为了确保文本的一致性和可读性。当用户从不同的来源复制内容到编辑器中时,原始文本可能包含各种样式,如字体、颜色、背景色等。这些样式可能不符合当前编辑器的设计或用户的需求,如pc端和移动端的数据交互,处理样式方式不同会导致无法正常展示,因此需要去除这些样式,以保持文本的统一风格。

实现方法

在配置项的modeules模块中添加 剪贴板配置:clipboard

editorOption: {
        modules: {
          clipboard: {
            // 粘贴过滤
            matchers: [[Node.ELEMENT_NODE, this.HandleCustomMatcher]]
            // ['img', this.HandleCustomMatcher2]
          },
          toolbar: {
            container: [
              'bold',
              'italic',
              'underline',
              'strike',
              { list: 'ordered' },
              { list: 'bullet' },
              { indent: '-1' },
              { indent: '+1' },
              { color: [] },
              { background: [] },
              'link',
              this.functionType
            ]
          }
        },
        placeholder: this.hasCancel ? this.hasCancel : ''
      }

过滤方法

    HandleCustomMatcher (node, Delta) {
      let ops = []
      Delta.ops.forEach(op => {
        console.log(op,'--------pp');
        if (op.insert && typeof op.insert === 'string') {
          ops.push({
            insert: op.insert
          })
        } else {
          // this.$message({
          //   message: '不允许粘贴图片',
          //   type: 'warning'
          // })
        }
      })
      Delta.ops = ops
      return Delta
    },

;