<template>
  <div id="editor">
    <div style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="tb" :mode="mode" />
      <Editor class="editor" :style="{ height }" :value="text" @input="toInput" :defaultConfig="ec" :mode="mode" @onCreated="onCreated" />
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

export default {
  name: 'editor',
  props: {
    text: { type: String },
    mode: { type: String, default: 'default' }, // 或者simple
    height: { type: String, default: '500px' },
    url: { type: String },
  },
  model: {
    prop: 'text',
    event: 'input',
  },
  components: { Editor, Toolbar },
  data: function () {
    return {
      editor: null,
      ec: {
        placeholder: '请输入内容...',
        MENU_CONF: { uploadImage: { server: this.url, customInsert: this.customPicInsert } },
      },
      tb: {
        excludeKeys: ['insertImage', 'insertVideo', 'uploadVideo', 'video'],
      },
    };
  },
  created() {},
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    toInput(e) {
      this.$emit('input', e);
    },
    /**
     * 自定义上传处理
     * @param {Object} result 上传结果
     * @param {Function} insertFn 编辑器添加上传结果函数
     * @prop {result} {
     *  errcode,
     *  errmsg,
     *  id,
     *  name,
     *  uri:短地址
     * }
     */
    customPicInsert(result, insertFn) {
      const { errcode, uri, name } = result;
      const url = `http://broadcast.waityou24.cn${uri}`;
      if (errcode === 0) {
        insertFn(url, name);
      }
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  watch: {
    url: {
      immediate: true,
      handler(val) {
        if (!val) return;
        const MENU_CONF = { uploadImage: { server: val }, customInsert: this.customPicInsert };
        // this.ec['MENU_CONF'] = MENU_CONF;
      },
    },
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
.editor {
  overflow-y: hidden;
}
</style>
