fix: 全局初始化比富文本编辑器的上传图片及视频

src/main.scss

@@ -54,3 +54,12 @@ body {
   justify-content: flex-end;
   margin-top: 20px;
 }
+
+.w-e-text-container img,
+.w-e-text-container video,
+.w-e-text img,
+.w-e-text video {
+  max-width: 100%;
+  width: 100%;
+  height: auto;
+}

src/main.ts

@@ -5,7 +5,7 @@ import './main.scss';
 import 'element-plus/dist/index.css';
 import App from './App.vue';
 import BreadcrumbBack from '@/components/BreadcrumbBack.vue';
-import { setupElement, setupDirectives } from '@/plugins';
+import { setupElement, setupDirectives, setupWangEditorUpload } from '@/plugins';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import '@/utils/g6Extensions';
@@ -15,6 +15,7 @@ import { notivue } from '@/components/custom-notivue/notivue-conf';
 import 'virtual:svg-icons-register';
 
 dayjs.locale('zh-cn');
+setupWangEditorUpload();
 
 async function bootstrap() {
   const app = createApp(App);

src/plugins/index.ts

@@ -1,2 +1,3 @@
 export { setupElement } from '@/plugins/element';
 export { setupDirectives } from '@/plugins/directives';
+export { setupWangEditorUpload } from '@/plugins/wangEditor';

src/plugins/wangEditor.ts

@@ -0,0 +1,12 @@
+import { Boot } from '@wangeditor/editor';
+import { createWangEditorMenuConf } from '@/utils/wangEditorUpload';
+
+export function setupWangEditorUpload() {
+  const menuConf = createWangEditorMenuConf();
+  Boot.setEditorConfig({
+    MENU_CONF: menuConf,
+  });
+  Boot.setSimpleEditorConfig({
+    MENU_CONF: menuConf,
+  });
+}

src/utils/wangEditorUpload.ts

@@ -0,0 +1,48 @@
+import { ElMessage } from 'element-plus';
+import { uploadFileApi, UPLOAD_BIZ_TYPE } from '@/api/minio';
+
+type InsertImageFn = (url: string, alt?: string, href?: string) => void;
+type InsertVideoFn = (url: string, poster?: string) => void;
+
+const createUploadFileName = (fileName: string) => {
+  const uuid = Math.random().toString(36).substring(2, 9);
+  const timestamp = Date.now().toString();
+  const random = Math.random().toString(36).substring(2, 4);
+  const extension = fileName.split('.').pop();
+  return extension ? `${uuid}-${timestamp}-${random}.${extension}` : `${uuid}-${timestamp}-${random}`;
+};
+
+const uploadEditorFile = async (file: File) => {
+  const uploadName = createUploadFileName(file.name || 'editor-file');
+  const res = await uploadFileApi({
+    bizType: UPLOAD_BIZ_TYPE.ATTACHMENT,
+    fileName: uploadName,
+    file,
+  });
+  return res.url;
+};
+
+export const createWangEditorMenuConf = () => ({
+  uploadImage: {
+    async customUpload(file: File, insertFn: InsertImageFn) {
+      try {
+        const url = await uploadEditorFile(file);
+        insertFn(url, file.name, url);
+      } catch (error) {
+        console.error('编辑器图片上传失败:', error);
+        ElMessage.error('图片上传失败，请重试');
+      }
+    },
+  },
+  uploadVideo: {
+    async customUpload(file: File, insertFn: InsertVideoFn) {
+      try {
+        const url = await uploadEditorFile(file);
+        insertFn(url);
+      } catch (error) {
+        console.error('编辑器视频上传失败:', error);
+        ElMessage.error('视频上传失败，请重试');
+      }
+    },
+  },
+});