<template>
  <!-- 富文本编辑器 -->
  <div class="editor">
    <Toolbar :defaultConfig="toolbarConfig" :editor="editor" :mode="mode" class="editor-toolbar"/>

    <Editor
      v-model="defaultHtml"
      :defaultConfig="editorConfigs"
      :mode="mode"
      @customPaste="customPaste"
      @onChange="onChange"
      @onCreated="onCreated"
    />
  </div>
</template>

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

/**
 * 富文本编辑器
 * - 示例
 *
 * ```vue
 * <ed-wang-editor v-model="value"></ed-wang-editor>
 * ```
 */
export default {
  name: 'EdWangEditor',
  components: {Editor, Toolbar},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {type: String, default: '',},
    // 'default' or 'simple'
    mode: {type: String, default: 'default'},
    // 工具栏配置
    toolbarConfig: {
      type: Object,
      default: ()=>{
        return {
          //排除某些菜单，其他都保留
          excludeKeys: ["group-video"],
        }
      }
    },
    // 编辑器配置（图片如配置颜色、字体、链接校验、上传图片等）
    editorConfig: {
      type: Object,
      default: ()=>{
        return {
          placeholder: "<p style='font-size: 14px'>请输入内容...</p>",
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          MENU_CONF: {}
        }
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function () {
        if (this.value && this.value.length > 0) {
          this.defaultHtml = this.value;
        }
      }
    },
  },
  // 文章编辑相关配置
  data() {
    return {
      editor: null,
      // 这里的 HTML 内容必须是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己随意写
      defaultHtml: '',
      // 默认编辑器配置
      defaultConfig: {
        placeholder: "<p style='font-size: 14px'>请输入内容...</p>",
      }
    }
  },
  computed: {
    editorConfigs(){
      return Object.assign({}, this.defaultConfig, this.editorConfig)
    }
  },
  methods: {
    // 编辑器创建完毕时的回调函数。
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },

    // 对用户剪切板内容的处理
    customPaste(editor, event) {
      // event 是 ClipboardEvent 类型，可以拿到粘贴的数据
      const text = event.clipboardData.getData('text/plain'); // 获取粘贴的纯文本
      editor.insertText(text);
      event.preventDefault(); // 阻止默认的粘贴行为
      return false;
    },

    //onChange 时获取编辑器最新内容
    onChange(e) {
      this.$emit('change', e.getHtml())
    },
    // 编辑器 focus 时的回调函数。
    onFocus(e){
      this.$emit("onFocus", e)
    },
    // 编辑器 blur 时的回调函数。
    onBlur(e){
      this.$emit("onBlur", e)
    },
  },
  //组件销毁时，及时销毁编辑器
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style lang="scss" scoped>
.editor {
  border: 1px solid #ccc;

  .editor-toolbar {
    border-bottom: 1px solid #ccc
  }
}
</style>

