feat(RichEditor): 富文本编辑器支持 OSS 图片上传

原 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 都不动.
This commit is contained in:
郭庆泰
2026-08-22 20:28:28 +08:00
parent 6710c459ce
commit 5409b7f815
+22 -2
View File
@@ -21,6 +21,8 @@
import { ref, shallowRef, computed, onBeforeUnmount } from 'vue' import { ref, shallowRef, computed, onBeforeUnmount } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' import '@wangeditor/editor/dist/css/style.css'
import { ElMessage } from 'element-plus'
import { uploadToOss } from '@/utils/oss'
const props = defineProps({ const props = defineProps({
modelValue: { type: String, default: '' }, modelValue: { type: String, default: '' },
@@ -48,8 +50,26 @@ const editorConfig = {
placeholder: props.placeholder, placeholder: props.placeholder,
MENU_CONF: { MENU_CONF: {
uploadImage: { uploadImage: {
// 简化: 不接图片上传接口, 用户直接粘贴/拖拽本地图片由浏览器转 base64 // 上传到 OSS (走 /common/oss/sign 签名, 不在前端暴露 accessKey)
customUpload: () => {} // 适用: 工具栏点图片按钮 / 粘贴图片 / 拖拽图片, 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 || '图片上传失败')
}
}
} }
} }
} }