<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <Editor
      v-model="html"
      style="height: 500px; overflow-y: hidden;"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
      @onDestroyed="onDestroyed"
      @onMaxLength="onMaxLength"
      @onFocus="onFocus"
      @onBlur="onBlur"
      @customAlert="customAlert"
    />
  </div>
</template>

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

export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {},
      editorConfig: {
        MENU_CONF: {
          'uploadImage': {
            server: process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData',
            fieldName: 'file',
            onSuccess(file, res) { // JS 语法
              console.log(`${file.name} 上传成功`, res)
            },
            customInsert(res, insertFn) { // JS 语法
              // res 即服务端的返回结果
              console.log(res)

              // 从 res 中找到 url alt href ，然后插入图片
              insertFn(res.data)
            }
          }
        },
        placeholder: '请输入内容...'
      },
      mode: 'simple' // or 'simple'
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) { console.log('onChange', editor.children) },
    onDestroyed(editor) { console.log('onDestroyed', editor) },
    onMaxLength(editor) { console.log('onMaxLength', editor) },
    onFocus(editor) { console.log('onFocus', editor) },
    onBlur(editor) { console.log('onBlur', editor) },
    customAlert(info, type) { window.alert(`customAlert in Vue demo\n${type}:\n${info}`) }
  }
})
</script>

<style>
.w-e-modal button {
  height: auto;
}
.w-e-text-container a {
  color: blue;
  text-decoration-line: underline;
}
.w-e-hover-bar {
  display: none;
}
.w-e-text-placeholder {
  top: 8px;
}
.w-e-full-screen-container {
  z-index: 99999999;
}
</style>
