vue项目中使用wangeditor ， word中粘贴的文字，会把style标签贴过来

Question

这个style样式也有问题 ， 找不到原因，下面是我配置文件 ，设置关闭粘贴样式过滤 也没有效果

<template>
  <div class="wang-editor">
    <div ref="toolbar" class="toolbar"></div>
    <div ref="editor" class="text"></div>
  </div>
</template>

<script>
  import E from "wangeditor";
  // import "wangeditor/release/wangEditor.min.css";
  export default {
    name: "wangEditor",
    data() {
      return {
        editor: null,
        isChange: false,
      };
    },
    props: {
      contentDefault: {
        type: String,
        default: "",
      },
      enable: {
        //控制编辑器是否能编辑
        type: Boolean,
        default: true,
      },
      isRequestSign: {
        type: [String, Number],
        defalut: 0
      },
      respondentSign: {
        type: String,
        default: "",
      },
      applicantSign: {
        type: String,
        defalut: ''
      }
    },
    watch: {
      contentDefault(value) {
        if (!this.isChange) {
          this.editor.txt.html(value);
        }
        this.isChange = false;
      },
    },
    mounted() {
      this._setEditor();
    },
    methods: {
      _setEditor() {
        this.editor = new E(this.$refs.toolbar, this.$refs.editor);
        this.editor.config.pasteFilterStyle = false //关闭粘贴样式过滤 也没有效果
        this.editor.config.onchange = (html) => {
          this.isChange = true;
          this.$emit("update:contentDefault", html); // 把这个html传入父组件
        };
        this.editor.config.menus = [
          "head", // 标题
          "bold", // 粗体
          "fontSize", // 字号
          "fontName", // 字体
          "italic", // 斜体
          "underline", // 下划线
          "strikeThrough", // 删除线
          "foreColor", // 文字颜色
          "backColor", // 背景颜色
          "link", // 插入链接
          "list", // 列表
          "justify", // 对齐方式
          "image", // 插入图片
          "video", // 插入视频
          "quote", // 引用
          "table", // 表格
          "code", // 插入代码
          "undo", // 撤销
          "redo", // 重复
        ];
        // 自定义字体
        this.editor.config.fontNames = [
          '宋体',
          '仿宋',
          '微软雅黑',
          'Arial',
          'Tahoma',
          'Verdana'
        ];

        // 字号
        this.editor.config.fontsizes = {
          'x-small': {
            name: '10px',
            value: '1',
          },
          small: {
            name: '13px',
            value: '2',
          },
          normal: {
            name: '16px',
            value: '3',
          },
          large: {
            name: '18px',
            value: '4',
          },
          'x-large': {
            name: '24px',
            value: '5',
          },
          'xx-large': {
            name: '32px',
            value: '6',
          },
          'xxx-large': {
            name: '48px',
            value: '7',
          }
        };

        this.editor.create();

        //是否可以编辑
        this.editor.txt.html(this.contentDefault);
        if (this.respondentSign) {
          let data = this.respondentSign.split(",")
          let newData = data.map(element => {
            return {
              src: element
            }
          })
          let appendContent =
            `<p>被申请人签字：${newData.reduce((str, item) => str + `<img  contenteditable="false" src='${item.src}'/>`, '')}</p>`
          this.editor.txt.append(appendContent)
        }
        if (this.applicantSign) {
          let data = this.applicantSign.split(",")
          let newData = data.map(element => {
            return {
              src: element
            }
          })
          let appendContent =
            `<p>申请人签字：${newData.reduce((str, item) => str + `<img contenteditable="false" src='${item.src}'/>`, '')}</p>`
          this.editor.txt.append(appendContent)
        }
        this.enable = this.isRequestSign ? false : true
        this.editor.$textElem.attr("contenteditable", this.enable);
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import "style/quill-base.scss";

  /deep/ .w-e-text img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;

    /* 以下两个属性目前并未支持，写在这里为了减少风险 */
    -o-user-select: none;
    user-select: none !important;
    cursor: inherit;

    &:hover {
      background: inherit !important;
      box-shadow: inherit !important;
    }
  }
</style>

Answer 1

等待大神解答