<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 300px; overflow-y: hidden;"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onChange="onChange"
      @onCreated="onCreated" />
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import "@wangeditor/editor/dist/css/style.css"

  export default Vue.extend({
      components: { Editor, Toolbar },
      props: {
        content: String
      },
      data() {
          return {
              editor: null,
              html: '',
              toolbarConfig: { },
              editorConfig: {
                placeholder: '请输入内容...' ,
                MENU_CONF: {
                  uploadImage: {
                    async customUpload(file, insertFn) {
                      let r = await UPLOADER.upload('images', file)
                      insertFn(r.url, '', r.url)
                    }
                  }
                }
              },
              mode: 'default', // or 'simple'
          }
      },
      watch: {
        content(n, o) {
          if(n != o) {
            this.html = this.content
          }
        }
      },
      created() {
        if(this.content && this.content.length > 0) {
          this.html = this.content
        }
      },
      methods: {
          onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
          },
          onChange(editor) {
            //console.log(editor.getHtml())
            this.$emit('changed', editor.getHtml())
          }
      },
      mounted() {
          this.html = this.content
      },
      beforeDestroy() {
          if(this.editor) {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
          }
      }
  })
</script>

<style>

</style>
