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 插入到编辑器, 显示成 + } catch (e) { + ElMessage.error(e?.message || '图片上传失败') + } + } } } }