case-data-admin/src/components/framework/wangeditor/index.vue

<!-- 
  * 编辑器
  * 
  * @Author:    1024创新实验室-主任：卓大 
  * @Date:      2022-09-12 15:34:33 
  * @Wechat:    zhuda1024 
  * @Email:     lab1024@163.com 
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
  *
-->
<template>
  <div style="border: 1px solid #ccc" class="myeditor">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
    <Editor
      style="overflow-y: hidden"
      :style="{ height: `${height}px` }"
      v-model="editorHtml"
      :defaultConfig="editorConfig"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>
<script setup>
  import { shallowRef, onBeforeUnmount, watch, ref } from 'vue';
  import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const';
 import { caseClinicalArticleApi } from '/@/api/business/case-clinical-article/case-clinical-article-api';
  import '@wangeditor/editor/dist/css/style.css';
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import { smartSentry } from '/@/lib/smart-sentry';
 import { SmartLoading } from '/@/components/framework/smart-loading';
  //菜单
  import dayjs from 'dayjs';
  import { FileUtil } from '/@/utils/fileutil';
    let props = defineProps({
    modelValue: String,
    height: {
      type: Number,
      default: 500,
    },
    editorConfig: {
      type: Object,
      default: { MENU_CONF: {} }
    },
    toolbarConfig: {
      type: Object,
      default: {}
    },
  });
  const editorConfig = props.editorConfig;
  console.log(editorConfig);
  const getImg = (file) => {
  return new Promise((resolve, reject) => {
    caseClinicalArticleApi.getOssSign(1).then((res) => {
      console.log(res.data);
      let { accessid, dir, policy, signature, host } = res.data;
      let filename = dayjs().format('YYYYMMDDHHmmss') + FileUtil.UUID() + '.' + 'png';
      let formData = new FormData();
      formData.append('OSSAccessKeyId', accessid);
      formData.append('policy', policy);
      formData.append('signature', signature);
      formData.append('key', dir + filename);
      formData.append('file', file, filename);
      formData.append('success_action_status', 200);
      caseClinicalArticleApi
        .ossUpload(host, formData)
        .then((res) => {
          console.log(host + dir + filename);
          resolve(host + dir + filename);
          SmartLoading.hide();
        })
        .catch((err) => {
          console.log(err);

         alert('上传失败');
         SmartLoading.hide();
        });
    });
  });

};

  //上传
  let customUpload = {
    async customUpload(file, insertFn) {
      try {
        SmartLoading.show();
        // const formData = new FormData();
        // formData.append('file', file);
        // let res = await fileApi.uploadFile(formData, FILE_FOLDER_TYPE_ENUM.COMMON.value);
        // let data = res.data;
        getImg(file).then((data) => {
          console.log(data);
          insertFn(data);
        });
        //insertFn(data.fileUrl);
      } catch (error) {
        smartSentry.captureError(error);
      }
    },
  };
  editorConfig.MENU_CONF['uploadImage'] = customUpload;
  editorConfig.MENU_CONF['uploadVideo'] = customUpload;

  // ----------------------- 以下是公用变量 emits props ----------------
  const editorHtml = ref();

  watch(
    () => props.modelValue,
    (nVal) => {
      console.log(nVal);
      editorHtml.value = nVal;
    },
    {
      immediate: true,
      deep: true,
    }
  );

  // 获取编辑器实例html
  const emit = defineEmits(['update:modelValue']);
  const editorRef = shallowRef();
  const handleCreated = (editor) => {
    editorRef.value = editor;

    console.log( Toolbar ) // 当前菜单排序和分组

  };
  const handleChange = (editor) => {
    emit('update:modelValue', editorHtml.value);
  };

  function getHtml() {
    const htmlContent = editorRef.value.getHtml();
    return htmlContent === '<p><br></p>' ? '' : htmlContent;
  }
  function getText() {
    return editorRef.value.getText();
  }

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

  defineExpose({
    editorRef,
    getHtml,
    getText,
  });

</script>
<style scoped>
  .w-e-full-screen-container {
    z-index: 9999 !important;
  }

 .myeditor >>> button[data-tooltip="编辑图片"]{
 display: none !important;
}

</style>