Solution to the problem that wangEditor does not trigger the onchange event when encapsulated in the Vue framework and deleted after the first mouse selection

Package one

vue encapsulates wangEditor with word count and word limit

<template>
  <div>
    <div :ref="id" :wordNumber="wordNumber"></div>
    <div class="gl-word-number" v-if="isCount">
      <span>字数统计：</span>
      <span>{
   
   { count }} / {
   
   { wordNumber }}</span>
    </div>
  </div>
</template>

<script>
import E from "wangeditor";

export default {
  props: {
    id: {
      type: String,
      default: "wangEditorEl"
    },
    isCount: {
      type: Boolean,
      default: true
    },
    wordNumber: {
      type: Number,
      default: 500
    },
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      count: 0,
      editor: {}
    };
  },
  mounted() {
    let editor = new E(this.$refs[this.id]);
    this.editor = editor;
    editor.customConfig = {
      onchange: html => {
        // 监听值得变化
        let text = editor.txt.text();
        if (this.isCount) {
          if (this.wordNumber < text.length) {
            editor.txt.text(text.substring(0, this.wordNumber));
            return;
          }
        }
        this.count = text.length;
        this.$emit("input", html);
      },
      zIndex: 1000,
      showLinkImg: true,
      customUploadImg: (files, insert) => {
        // 文件上传
      },
      uploadImgMaxSize: 5 * 1024 * 1024, // 限制上传图片大小
      uploadImgMaxLength: 1, // 限制上传图片数量
      menus: [
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        // 'quote',  // 引用
        // 'emoticon',  // 表情
        "image", // 插入图片
        "table", // 表格
        // 'video',  // 插入视频
        // 'code',  // 插入代码
        "undo", // 撤销
        "redo" // 重复
      ],
      colors: [
        "#535353",
        "#eeece0",
        "#1c487f",
        "#4d80bf",
        "#c24f4a",
        "#8baa4a",
        "#7b5ba1",
        "#46acc8",
        "#f9963b",
        "#ffffff"
      ]
    };
    editor.create();
    editor.txt.html(this.value);
    this.count = editor.txt.text().length;
  },
  methods: {
    readyHtml() {
      this.editor.txt.html(this.value);
      this.count = this.editor.txt.text().length;
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.w-e-droplist ul.w-e-block li.w-e-item:last-child {
  background: #EBEEF5;
}
</style>

 Package 2

wangEditor package, two linked text and html; solve the problem by listening to the input event and the first mouse selection and deletion does not trigger the onchange event.

<template>
  <div ref="experienceComment"></div>
</template>
<script>
import E from "wangeditor";

export default {
  props: {
    experienceComment: {
      type: String,
      default: ""
    },
    experienceCommentHtml: {
      type: String,
      default: ""
    },
    maxlength: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      editor: null
    };
  },
  mounted() {
    this.editor = new E(this.$refs["experienceComment"]);
    this.editor.customConfig = {
      zIndex: 1000,
      menus: [
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor" // 背景
      ],
      colors: [
        "#535353",
        "#eeece0",
        "#1c487f",
        "#4d80bf",
        "#c24f4a",
        "#8baa4a",
        "#7b5ba1",
        "#46acc8",
        "#f9963b",
        "#ffffff"
      ],
      onchange: html => {
        // 监听值得变化
        let text = this.editor.txt.text();
        if (this.maxlength < text.length) {
          this.editor.txt.text(text.substring(0, this.maxlength));
          return;
        }
        this.$emit("update:experienceCommentHtml", html);
        this.$emit("update:experienceComment", text);
      }
    };
    this.editor.create();
    this.editor.txt.html(
      this.experienceCommentHtml
        ? this.experienceCommentHtml
        : `<p>${this.experienceComment}</p>`
    );
    this.$refs["experienceComment"].addEventListener("input", this.inputEvent)
  },
  methods: {
    inputEvent() {
      let html = this.editor.txt.html();
      if (html === '' || html === '<p><br></p>') {
        this.editor.customConfig.onchange()
      }
    }
  },
  beforeDestroy() {
    this.$refs["experienceComment"].removeEventListener("input", this.inputEvent)
  },
  watch: {
    experienceCommentHtml: function(value) {
      this.editor.txt.html(value);
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.w-e-droplist ul.w-e-block li.w-e-item:last-child {
  background: #ebeef5;
}
/deep/ .w-e-text-container {
  height: 200px !important;
}
/deep/ .w-e-text {
  text-align: left;
  p {
    margin: 0;
  }
}
</style>