From 5409b7f815a6b2fdf8655d69e6d6cd0a006b50e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E5=BA=86=E6=B3=B0?=
 <12369755+htcloud1@user.noreply.gitee.com>
Date: Sat, 22 Aug 2026 20:28:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(RichEditor):=20=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E6=94=AF=E6=8C=81=20OSS=20=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原 customUpload: () => {} 是空函数, 工具栏点图片/粘贴图片/拖拽图片都无效.

参考 hwt-web/wang-editor4.vue 的思路, 但用项目已有的 /common/oss/sign 签名 + utils/oss.uploadToOss,
不在前端硬编码 accessKey (hwt-web 那种写法有 key 泄露风险).

新行为:
- 工具栏点 '图片' → 选本地 → uploadToO Oss → insertFn(url) 插入 OSS URL
- 粘贴图片 (Ctrl+V) → 同上
- 拖拽图片 → 同上
- 非图片文件 → ElMessage.warning '只支持图片文件'
- >5MB → ElMessage.warning '图片大小不能超过 5MB'
- 上传失败 → ElMessage.error

文件存到 OSS 'ry8080/rich-editor/' 目录.

适用场景:
- BizArticleEdit (协议管理)
- BizSpecialPlanEdit (专项计划管理)
- 其它用 <RichEditor> 的页面立即获得上传能力

业务逻辑 100% 保留: toolbarConfig excludeKeys (排除视频), placeholder, v-model 双向绑定, change emit 都不动.
---
 ry-vue3/src/components/RichEditor.vue | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/ry-vue3/src/components/RichEditor.vue b/ry-vue3/src/components/RichEditor.vue
index f5f5cf6..a7b4121 100644
--- a/ry-vue3/src/components/RichEditor.vue
+++ b/ry-vue3/src/components/RichEditor.vue
@@ -21,6 +21,8 @@
 import { ref, shallowRef, computed, onBeforeUnmount } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import '@wangeditor/editor/dist/css/style.css'
+import { ElMessage } from 'element-plus'
+import { uploadToOss } from '@/utils/oss'
 
 const props = defineProps({
   modelValue: { type: String, default: '' },
@@ -48,8 +50,26 @@ const editorConfig = {
   placeholder: props.placeholder,
   MENU_CONF: {
     uploadImage: {
-      // 简化: 不接图片上传接口, 用户直接粘贴/拖拽本地图片由浏览器转 base64
-      customUpload: () => {}
+      // 上传到 OSS (走 /common/oss/sign 签名, 不在前端暴露 accessKey)
+      // 适用: 工具栏点图片按钮 / 粘贴图片 / 拖拽图片, wangeditor 都会调 customUpload
+      customUpload: async (file, insertFn) => {
+        // 类型校验 (只允许图片)
+        if (!file.type.startsWith('image/')) {
+          ElMessage.warning('只支持图片文件')
+          return
+        }
+        // 大小校验 (5MB)
+        if (file.size / 1024 / 1024 > 5) {
+          ElMessage.warning('图片大小不能超过 5MB')
+          return
+        }
+        try {
+          const url = await uploadToOss(file, 'ry8080/rich-editor/')
+          insertFn(url)  // wangeditor 把 URL 插入到编辑器, 显示成 <img>
+        } catch (e) {
+          ElMessage.error(e?.message || '图片上传失败')
+        }
+      }
     }
   }
 }