<template>
  <div class="editor">
    <div id="e" />
  </div>
</template>

<script>
import Vue from 'vue'
import E from 'wangeditor'
export default {
  name: 'Editor',
  model: {
    prop: 'desc',
    event: 'change'
  },
  props: {
    desc: {
      type: String,
      default: ''
    },
    // 业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
    isClear: {
      type: Boolean,
      default: false
    },
    isdisable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      content: '',
      editor: '',
      info_: null
    }
  },
  watch: {
    isClear(val) {
      console.log(val)
      if (val) {
        this.editor.txt.clear()
        // this.info_=null
      }
    },
    isdisable(val) {
      console.log(val)
      if (val) {
        this.editor.disable()
      }
    },
    desc(value) {
      // console.log('desc', value)
      if (value != this.editor.txt.html()) {
        this.editor.txt.html(this.desc)
      }
    }
  },
  mounted() {
    this.initE()
    this.monitoring() // 注册监听事件
  },
  methods: {
    initE() {
      this.editor = new E('#e')
      console.log(this.editor)
      this.editor.config.height = 520
      this.editor.config.onchange = (html) => {
        this.info_ = html // 绑定当前逐渐地值
        this.$emit('change', this.info_) // 将内容同步到父组件中
      }
      this.editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'lineHeight', // 行高
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        // 'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        // 'quote', // 引用
        // 'emoticon', // 表情
        // 'image', // 插入图片
        'table', // 表格
        // 'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ]
      this.editor.create()
    },
    monitoring() { // 监听事件
      this.$on('disable', (res) => {
        this.editor.disable()
      })
      this.$on('clear', (res) => {
        console.log('clear')
        this.editor.txt.clear()
      })
      this.$on('getText', (res) => {
        this.$emit('getTextVal', this.editor.txt.html())
      })
    }
  }
}
</script>

<style>

</style>
