vueリッチテキストコンパイラの使用

ここではvue-cli 3またはより良いバージョンを使用しています.
あまり話さないで、コードをつけます.
まず、npm i wangeditor-Sをグローバルにインストールします.
これはコンポーネントで、テキストコンパイラに富んだ場所に導入すればいいです.

import E from "wangeditor";
export default {
  name: "Editor",
  data() {
    return {
      editor: null,
      editorContent: ""
    };
  },
  // catchData         ，     ，            ，               html          
  props: ["catchData"], //         
  mounted() {
    this.editor = new E(this.$refs.editorElem);
    //       ，        html  
    this.editor.customConfig.onchange = html => {
      this.editorContent = html;
      console.log(this.editorContent);//      
      this.$parent.getMge(this.editorContent);
      //   this.$emit('toMessage',this.editorContent)
      //   this.catchData(this.editorContent); //    html  catchData        
    };
    this.editor.customConfig.menus = [
      //     
      "head", //   
      "bold", //   
      "fontSize", //   
      "fontName", //   
      "italic", //   
      "underline", //    
      "strikeThrough", //    
      "foreColor", //     
      "backColor", //     
      "link", //     
      "list", //   
      "justify", //     
      "quote", //   s
      "emoticon", //   
      "image", //     
      "table", //   
      "code", //     
      "undo", //   
      "redo" //   
    ];
    this.editor.create(); //        
  }
};

たとえば、私のページでは、リッチテキストコンパイラを使用する必要があります.ページの導入:

import Editor from "../../components/Editor";
export default {
  name: "accredit",
  components: {
    Editor
  },
  data() {
    return {
      //   
      defalultMsg: "",
      config: {
        initialFrameWidth: 1200,
        initialFrameHeigth: 350
      },
      docTitle: "", //    
      decDescription: "", //    
      decMain: "", //  
    };
  },
  methods: {
    getMge(val) {
      console.log("         ", val);
    }
  }
};