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