<template>
    <div ref="editor" />
</template>
<script>

  import E from 'wangeditor'

  export default {
    name: "TaRichEditor",
    props: {
      // 兼容之前的配置写法
      customConfig: {
        type: Object,
        default() {
          return {}
        },
      },
      // wangeditor2 版本的配置为config
      config: {
        type: Object,
        default() {
          return {}
        },
      },
      disabled: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        editor: {},
      }
    },
    watch: {
      disabled(val) {
        this.setDisabled(val)
      },
    },
    mounted() {
      this.editor = new E(this.$refs.editor);
      this.editor.config = Object.assign(this.editor.config,this.config,this.customConfig)
      this.editor.create();
      this.setDisabled(this.disabled)
    },
    methods: {
      setDisabled(val) {
        if (val) {
          this.editor.disable();
        } else {
          this.editor.enable();
        }
      },
      //获取内容（html格式）
      getHtml() {
        return this.editor.$txt.html();
      },
      //获取内容（文本格式）
      getText() {
        return this.editor.$txt.text();
      },
      //设置内容
      setContent(content) {
        if (!this.disabled) {
          this.editor.$txt.html(content);
        }
      },
      //追加内容
      appendContent(content) {
        if (!this.disabled) {
          this.editor.$txt.append(content);
        }
      },
      //清空内容
      clearContent() {
        if (!this.disabled) {
          this.editor.clear();
        }
      },
    },
  }
</script>

<style scoped>

</style>
