<template>
  <div id="demo1" class="quill-editor"> </div>
</template>

<script>
// 引入 wangEditor
import WangEditor from 'wangeditor'

export default {
  name: 'SdWangEditor',
  props: {
    value: {
      type: String,
      default: '',
    },
    options: {
      type: Object,
      default: function() {
        return {}
      },
    },
    // 业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
    isClear: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      editor: null,
      content: '',
      info_: null,
    }
  },

  watch: {
    isClear(val) {
      if (val) {
        this.editor.txt.clear()
        this.info_ = null
      }
    },

    value(val) {
      if (val !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    },
  },
  mounted() {
    const editor = new WangEditor(`#demo1`)
    editor.config.menuTooltipPosition = this.options.menuTooltipPosition
    editor.config.uploadImgShowBase64 = true
    editor.config.showLinkImg = false
    editor.config.placeholder = this.options.placeholder
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (html) => {
      this.info_ = html
      this.$emit('input', this.info_)
      this.$emit('change', this.info_)
    }
    // 创建编辑器
    editor.create()
    editor.$toolbarElem.elems[0].style.cssText = ''
    editor.$textContainerElem.elems[0].style.cssText = ''
    this.editor = editor
    if (this.value.length) {
      this.editor.txt.html(this.value)
    }
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  },
  methods: {},
}
</script>

<style lang="scss">
.w-e-table {
  display: flex;
  line-height: 23px;
}
.w-e-text-container {
  border: 1px solid #ccc;
  border-top: 0;
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
}
.w-e-toolbar {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 8px;
  border-radius: 4px 4px 0 0;
}
</style>

<docs>
```vue
<template>
  <div>
    <p><sd-quill-editor v-model="richText" /></p>
    <p>v-model的值：</p>
    <p>{{richText}}</p>
  </div>

</template>

<script>
export default {
  data() {
    return {
      richText: '<p>这是一些<b>富文本</b>内容</p>',
    };
  },
}
</script>
```
</docs>
