<template>
  <div>
    <div ref="editorElem"></div>
  </div>
</template>
<script>
import E from 'wangeditor'
export default {
  name: "wangEditor",
  props:{
    content:{},
    placeholder:{}
  },
  data() {
    return {
      Editor:null,
    };
  },
  model: {

  },
  mounted() {
    this.initE();
  },
  methods: {
    initE() {
      this.Editor = new E(this.$refs.editorElem);
      //缺省提示
      this.Editor.config.placeholder = this.placeholder?this.placeholder:'请输入...'
      //关闭全屏
      this.Editor.config.showFullScreen = false;
      this.Editor.config.menus  = [];
      this.Editor.config.onchange = (html) => {
        this.info_ = html // 绑定当前逐渐地值
        this.$emit('change', this.info_) // 将内容同步到父组件中
      }
      this.Editor.create()
      this.Editor.txt.html(this.content);
      // this.Editor.txt.html('<p>用 JS 设置的内容</p>')
    },
  },
  beforeDestroy() {
    this.Editor = null;
  },
};
</script>

<style lang="css">
  .editor {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
  }
  .toolbar {
    border: 1px solid #ccc;
  }
  .text {
    border: 1px solid #ccc;
    min-height: 500px;
  }
</style>
