富文本编辑器上传

src/components/editor/index.vue

@@ -15,9 +15,13 @@
 <script setup lang="ts" name="wngEditor">
 // https://www.wangeditor.com/v5/for-frame.html#vue3
 import '@wangeditor/editor/dist/css/style.css'
-import { reactive, shallowRef, watch, onBeforeUnmount } from 'vue'
+import { reactive, shallowRef, watch, onBeforeUnmount, getCurrentInstance } from 'vue'
 import { IDomEditor } from '@wangeditor/editor'
 import { Toolbar, Editor } from '@wangeditor/editor-for-vue'
+import type { IEditorConfig, IToolbarConfig } from "@wangeditor/core";
+
+import { FileApi } from '/@/api/admin/File'
+const { proxy } = getCurrentInstance() as any
 
 // 定义父组件传过来的值
 const props = defineProps({
@@ -48,14 +52,58 @@ const props = defineProps({
   getText: String,
 })
 
+
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['update:getHtml', 'update:getText'])
 
 // 定义变量内容
 const editorRef = shallowRef()
 const state = reactive({
-  editorConfig: {
-    placeholder: props.placeholder,
+  editorConfig: {    
+    placeholder: props.placeholder,       
+    MENU_CONF: {
+      uploadImage: {       
+        async customUpload(file : any, insertFn) { 
+          
+          if (file.type.indexOf('image/') < 0) { 
+            proxy.$modal.msgError("请选择图片上传");
+            return
+          }
+          if (file.size>2*1024*1024) {
+            proxy.$modal.msgError("请选择2M内图片");
+            return
+          }          
+          const res =await new FileApi().uploadFile({ file: file }, { fileDirectory: 'editorImg' }, { loading: true }).catch(() => {            
+          })         
+          if (res?.success) {
+            const src = res?.data?.linkUrl;
+            insertFn(src, 'Editor Image', src)
+          } else {
+            proxy.$modal.msgError("图片上传失败");
+          }          
+        },
+      },
+      uploadVideo: {
+        async customUpload(file:any, insertFn) {          
+          if (file.type.indexOf('video/') < 0) {
+            proxy.$modal.msgError("请选择视频上传");
+            return
+          }
+          if (file.size > 100 * 1024 * 1024) {
+            proxy.$modal.msgError("请选择100M内视频");
+            return
+          }          
+          const res = await new FileApi().uploadFile({ file: file }, { fileDirectory: 'editorVideo' }, { loading: true }).catch(() => {
+          })
+          if (res?.success) {
+            const src = res?.data?.linkUrl;
+            insertFn(src, 'Editor Video', src)
+          } else {
+            proxy.$modal.msgError("视频上传失败");
+          }
+        },
+      }
+    }
   },
   editorVal: props.getHtml,
 })
@@ -97,4 +145,5 @@ watch(
     deep: true,
   }
 )
+
 </script>