init

src/components/WangEdit/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="editor" id="editor"></div>
+</template>
+
+<script>
+  import wangEditor from 'wangeditor'
+  export default {
+    name:"WangEdit",
+    props:{
+      /* 编辑器的内容 */
+      value: {
+        type: String,
+        default: "",
+      },
+      /* 高度 */
+      height: {
+        type: Number,
+        default: null,
+      },
+    },
+    data() {
+      return {
+        editor: null,
+        editorData: ''
+      }
+    },
+    /*computed: {
+      styles() {
+        let style = {};
+        if (this.minHeight) {
+          style.minHeight = `${this.minHeight}px`;
+        }
+        if (this.height) {
+          style.height = `${this.height}px`;
+        }
+        return style;
+      },
+    },*/
+    watch:{
+      value:{
+        handler(val){
+          if(val !== this.editorData){
+            this.editorData = val === null ? "" : val;
+            if (this.editor) {
+              this.editor.txt.html(this.editorData);
+            }
+          }
+        },
+        immediate: true,
+      },
+    },
+    mounted() {
+      const editor = new wangEditor(`#editor`)
+      editor.config.height = this.height ? this.height : 500;
+      // 创建编辑器
+      editor.create()
+      this.editor = editor
+      this.editor.txt.html(this.editorData);
+      // 配置 onchange 回调函数，将数据同步到 vue 中
+      editor.config.onchange = (newHtml) => {
+        this.editorData = newHtml
+        this.$emit("input", this.editorData);
+      }
+    },
+    methods: {
+      getEditorData() {
+        // 通过代码获取编辑器内容
+        let data = this.editor.txt.html()
+        alert(data)
+      }
+    },
+    beforeDestroy() {
+      // 调用销毁 API 对当前编辑器实例进行销毁
+      this.editor.destroy()
+      this.editor = null
+    }
+  }
+</script>