<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>
