<template>
  <div style="border: 1px solid #ccc; margin-bottom: 20px">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      mode="default"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script lang="ts" setup>
  import '@wangeditor/editor/dist/css/style.css'; // 引入 css

  import { onBeforeUnmount, ref, shallowRef, defineExpose } from 'vue';
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import { IEditorConfig, Partial } from '@wangeditor/editor';
  import { getToken } from '/@/utils/auth';
  import { getAppEnvConfig } from '/@/utils/env';

  const { VITE_GLOB_UPLOAD_URL } = getAppEnvConfig();
  const token = getToken();
  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef();

  // 内容 HTML
  const valueHtml = ref('');

  const toolbarConfig = {};
  const editorConfig: Partial<IEditorConfig> = {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        server: VITE_GLOB_UPLOAD_URL,
        fieldName: 'file',
        headers: {
          Authorization: token,
        },
        customInsert(res: any, insertFn: InsertFnType) {
          insertFn(res.result);
        },
      },
    },
  };

  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });

  const handleCreated = (editor) => {
    editorRef.value = editor; // 记录 editor 实例，重要！
  };

  defineExpose({ valueHtml });
</script>

<style lang="less" scoped></style>
