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:
@@ -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 || '图片上传失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user