Problems with using wangeditor rich text editing in Vue

<!--Rich text editor. http://www.wangeditor.com/
Example of use:
<AppEditor v-model="content"></AppEditor>
-->
<template>
 <article ref="editor" class="AppEditor-root"></article>
</template>
<script>
 const E = require('wangeditor');
 export default {
  name: 'AppEditor',
  model: {
   prop: 'value',
   event: 'update:value',
  },
  props: {
   // value, v-model binding value: {type: String, default: ''},
   //Menu optionsmenus: {
    type: Array,
    default(){
     return [
      : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    },
   },
  },
  data(){
   return {
    editor: {}, // Editor object_value: '', // Content backup, used for judgment during watch, only changes when the editor is input};
  },
  computed: {},
  mounted(){
   this.initEditor();
  },
  watch:
   value(newValue, oldValue){
    // Editor onchange changes are not processed, only those from the parent component are processed to prevent text rollback bug
    if (newValue != this._value) {
     this.editor.txt.html(newValue);
    }
   },
  },
  methods: {
   initEditor(){
    let editor = new E(this.$refs.editor);
    Object.assign(editor.customConfig, {
     menus: this.menus,
     zIndex: 100,
     height: 200,
     pasteFilterStyle: false,
     onchange: (html) => {
      this._value = html; // Update _value
      this.$emit('update:value', html); // Update value
     },
     customUploadImg:((file, insert)=> {
      if(this.$utils.isEmpty(file)){
       return;
      }
      const msg = this.$Message.loading({
       content: 'Dear, the picture is being uploaded, please wait...',
       duration: 0
      });
      var params = new FormData();
      params.append('img', file[0]);
      this.$api.post('/synthesis/crm/picture/pictureUpload',params).then(res => {
       insert(res.data.imgUrl)
       setTimeout(msg, 0);
       this.$Message.success('Upload successful');
      })
     }),
     uploadImgHooks:{

      customInsert: function (insertImg, result, editor) {
       insertImg(result.url)
      }
     }
    });


    editor.create();
    editor.txt.html(this.value); // For asynchronous data acquisition, it cannot be bound immediately. Watch the judgment and process this.editor = editor;
   },
  },
 };
</script>
<style scoped lang="scss">
 .AppEditor-root{ border: 1px solid #f0f0f0; height: 400px !important;
  /deep/ .we-toolbar{ border: none !important; border-bottom: 1px solid #f0f0f0 !important; background-color: #fff !important;

  }
  /deep/ .we-text-container{ height: calc(100% - 43px) !important; border: none !important; z-index:1 !important;
   .we-text{ height: 100%; overflow-y: auto !important;}
  }
 }

</style>