富文本内新增：插入视频，上传视频

src/views/paper/article/index.vue

@@ -140,9 +140,6 @@ const toolbarConfig = {
   showLinkImg: false,
   uploadImgShowBase64: true,
   excludeKeys: [
-    'insertVideo', // 删除视频
-    'uploadVideo',
-    'group-video',
     'insertImage',// 删除网络图片上传
     'insertLink',// 删除链接
     'insertTable',// 删除表格
@@ -172,6 +169,25 @@ const editorConfig = {
           koiNoticeError('图片限制为1M，请调整好再上传！');
         }
       },
+    },
+    uploadVideo: {
+      maxFileSize: 50 * 1024 * 1024,
+      server: import.meta.env.VITE_WEB_BASE_API + '/api/common/upload',
+      fieldName: 'file',
+      meta: {
+        association_id: 0,
+      },
+      customInsert(res, insertFn) {  // TS 语法
+        // customInsert(res, insertFn) {                  // JS 语法
+        // res 即服务端的返回结果
+        console.log(res);
+        // 从 res 中找到 url alt href ，然后插入图片
+        insertFn(res.data.fullurl, '', '')
+      }, onError: (file, err, res) => {
+        if (err.message.indexOf('exceeds maximum allowed size') !== -1) {
+          koiNoticeError('视频限制为50M，请调整好再上传！');
+        }
+      },
     }
   }
 }

src/views/paper/article/update.vue

@@ -4,16 +4,17 @@
       <el-row :gutter="20">
         <el-col :span="8">
           <div style="padding: 0px 20px 20px 0px;font-weight: 600">请在图片边框内选定区域</div>
-          <el-card :body-style="{padding:'0'}" style="padding: 0;position:relative;">
+          <el-card :body-style="{ padding: '0' }" style="padding: 0;position:relative;">
-            <div @mousedown="startDrag" @mousemove="onDrag" @mouseup="endDrag" @mouseleave="endDrag" style="width: 100%">
+            <div @mousedown="startDrag" @mousemove="onDrag" @mouseup="endDrag" @mouseleave="endDrag"
+              style="width: 100%">
               <!-- 图片 -->
               <img draggable="false" id="image-selector" :src="bmInfoData.bm_img" ref="image" alt="image"
-                   @click="handleClick"
+                @click="handleClick"
-                   style="cursor: crosshair; position: relative; user-select: none; width: 100%; height: auto;"
+                style="cursor: crosshair; position: relative; user-select: none; width: 100%; height: auto;"
-                   @load="onImageLoad"/>
+                @load="onImageLoad" />
               <!-- 画布用于绘制矩形路径 -->
               <canvas id="myCanvas" ref="canvas" :width="imageWidth" :height="imageHeight"
-                      style="position: absolute; top: 0; left: 0; pointer-events: none;">
+                style="position: absolute; top: 0; left: 0; pointer-events: none;">
               </canvas>
             </div>
           </el-card>
@@ -21,29 +22,29 @@
         <el-col :span="16">
           <el-form :model="form" label-width="auto">
             <el-form-item label="新闻标题" required>
-              <el-input v-model="form.new_name" placeholder="请输入新闻标题" size="large"/>
+              <el-input v-model="form.new_name" placeholder="请输入新闻标题" size="large" />
             </el-form-item>
             <el-form-item label="新闻副标题">
-              <el-input v-model="form.subtitle" placeholder="请输入新闻副标题" size="large"/>
+              <el-input v-model="form.subtitle" placeholder="请输入新闻副标题" size="large" />
             </el-form-item>
             <el-form-item label="新闻记者" required>
-              <el-input v-model="form.reporter" placeholder="请输入新闻记者" size="large"/>
+              <el-input v-model="form.reporter" placeholder="请输入新闻记者" size="large" />
             </el-form-item>
             <el-form-item label="新闻坐标" required>
-              <el-input disabled v-model="coordinate" placeholder="请选择新闻坐标" size="large"/>
+              <el-input disabled v-model="coordinate" placeholder="请选择新闻坐标" size="large" />
               <el-button class="mt-2" @click="allowClickTrue()">重新选择</el-button>
             </el-form-item>
             <el-form-item label="媒体链接">
-              <el-input v-model="form.video" placeholder="请输入媒体链接" size="large"/>
+              <el-input v-model="form.video" placeholder="请输入媒体链接" size="large" />
             </el-form-item>
             <el-form-item label="跳转链接">
-              <el-input v-model="form.jump_link" placeholder="请输入跳转链接" size="large"/>
+              <el-input v-model="form.jump_link" placeholder="请输入跳转链接" size="large" />
             </el-form-item>
             <el-form-item label="新闻详情" required>
               <el-card shadow="hover">
-                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
+                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
                 <Editor style="height: 300px; overflow-y: hidden;" v-model="form.content" :defaultConfig="editorConfig"
-                        @onCreated="handleCreated"/>
+                  @onCreated="handleCreated" />
               </el-card>
             </el-form-item>
             <el-form-item label=" ">
@@ -59,24 +60,24 @@
 
 <script setup lang="ts">
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
-import {getAssets} from "@/utils/index.ts";
+import { getAssets } from "@/utils/index.ts";
-import {onBeforeUnmount, ref, shallowRef, onMounted, reactive, nextTick} from 'vue'
+import { onBeforeUnmount, ref, shallowRef, onMounted, reactive, nextTick } from 'vue'
-import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import {bmInfo, newsAdd, newsInfo, newsUpdate} from "@/api/system/post";
+import { bmInfo, newsAdd, newsInfo, newsUpdate } from "@/api/system/post";
-import {koiNoticeError, koiNoticeSuccess} from "@/utils/koi.ts";
+import { koiNoticeError, koiNoticeSuccess } from "@/utils/koi.ts";
-import {useRoute, useRouter} from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import useTabsStore from "@/stores/modules/tabs.ts"; // 导入 useRoute
 const router = useRouter();
 const tabsStore = useTabsStore();
 const form = reactive({
   new_name: '',
   coordinate: '',
-  coordinate_show:'',
+  coordinate_show: '',
   subtitle: '',
   reporter: '',
   content: '',
   video: '',
-  jump_link:'',
+  jump_link: '',
 });
 /*新闻坐标  真实的*/
 const coordinate = ref();
@@ -92,7 +93,7 @@ onMounted(() => {
 })
 const getNewsInfo = async () => {
   try {
-    const res: any = await newsInfo({id: id.value});
+    const res: any = await newsInfo({ id: id.value });
     console.log("菜单数据表格数据->", res.data);
     form.new_name = res.data.new_name;
     form.subtitle = res.data.subtitle;
@@ -101,7 +102,7 @@ const getNewsInfo = async () => {
     form.id = res.data.id;
     form.bm_id = res.data.bm_id;
     form.coordinate = res.data.coordinate;
-    form.coordinate_show=res.data.coordinate_show;
+    form.coordinate_show = res.data.coordinate_show;
     form.video = res.data.video;
     form.jump_link = res.data.jump_link;
     coordinate.value = res.data.coordinate;
@@ -117,7 +118,7 @@ const getNewsInfo = async () => {
 }
 const getBmInfo = async (bm_id) => {
   try {
-    const res: any = await bmInfo({id: bm_id});
+    const res: any = await bmInfo({ id: bm_id });
     console.log("菜单数据表格数据->", res.data);
     bmInfoData.value = res.data;
     var coordArray = coordinateShow.value.split(",");
@@ -126,7 +127,7 @@ const getBmInfo = async (bm_id) => {
     var yy1 = parseInt(sArray[1]);
     var xx2 = parseInt(sArray[2]);
     var yy2 = parseInt(sArray[3]);
-    s.value = {xx1, yy1, xx2, yy2};
+    s.value = { xx1, yy1, xx2, yy2 };
     var x1 = parseInt(coordArray[0]);
     var y1 = parseInt(coordArray[1]);
     var x2 = parseInt(coordArray[2]);
@@ -139,7 +140,7 @@ const getBmInfo = async (bm_id) => {
   }
 }
 const updateDrawRectanglePath = (x1, y1, x2, y2) => {
-  rectCoordinates.value = {x1, y1, x2, y2};
+  rectCoordinates.value = { x1, y1, x2, y2 };
   // 显示矩形（用于视觉反馈）
   rect.value = {
     left: `${x1}px`,
@@ -161,7 +162,7 @@ const updateDrawRectanglePath = (x1, y1, x2, y2) => {
 /*文章保存*/
 const onSubmit = async () => {
   form.coordinate = coordinate.value;
-  form.coordinate_show=coordinateShow.value ;
+  form.coordinate_show = coordinateShow.value;
   console.log(form);
   try {
     const res: any = await newsUpdate(form);
@@ -179,9 +180,6 @@ const toolbarConfig = {
   showLinkImg: false,
   uploadImgShowBase64: true,
   excludeKeys: [
-    'insertVideo', // 删除视频
-    'uploadVideo',
-    'group-video',
     'insertImage',// 删除网络图片上传
     'insertLink',// 删除链接
     'insertTable',// 删除表格
@@ -206,11 +204,30 @@ const editorConfig = {
         console.log(res);
         // 从 res 中找到 url alt href ，然后插入图片
         insertFn(res.data.fullurl, '', '')
-      }, onError:(file, err, res)=>{
+      }, onError: (file, err, res) => {
-        if(err.message.indexOf('exceeds maximum allowed size') !== -1){
+        if (err.message.indexOf('exceeds maximum allowed size') !== -1) {
           koiNoticeError('图片限制为1M，请调整好再上传！');
         }
       },
+    },
+    uploadVideo: {
+      maxFileSize: 50 * 1024 * 1024,
+      server: import.meta.env.VITE_WEB_BASE_API + '/api/common/upload',
+      fieldName: 'file',
+      meta: {
+        association_id: 0,
+      },
+      customInsert(res, insertFn) {  // TS 语法
+        // customInsert(res, insertFn) {                  // JS 语法
+        // res 即服务端的返回结果
+        console.log(res);
+        // 从 res 中找到 url alt href ，然后插入图片
+        insertFn(res.data.fullurl, '', '')
+      }, onError: (file, err, res) => {
+        if (err.message.indexOf('exceeds maximum allowed size') !== -1) {
+          koiNoticeError('视频限制为50M，请调整好再上传！');
+        }
+      },
     }
   }
 }
@@ -238,7 +255,7 @@ const imageWidth = ref(0); // 图片宽度
 const imageHeight = ref(0); // 图片高度
 const imageLoaded = ref(false); // 确保图片加载完成
 const isDragging = ref(false); // 是否正在拖动
-const dragStart = ref({x: 0, y: 0}); // 拖动开始的坐标
+const dragStart = ref({ x: 0, y: 0 }); // 拖动开始的坐标
 const allowClick = ref(true); // 是否允许点击
 
 const allowClickTrue = () => {
@@ -274,8 +291,8 @@ const handleClick = (event) => {
   const x = event.clientX - rect.left;
   const y = event.clientY - rect.top;
   // 保存点击的坐标
-  points.value.push({x, y});
+  points.value.push({ x, y });
-  showPoints.value.push({xx, yy});
+  showPoints.value.push({ xx, yy });
   console.log(`Clicked at: (${x}, ${y})`); // 调试信息
   console.log(`Clicked at a: (${xx}, ${yy})`); // 调试信息
   // 确保 canvas 元素存在后再绘制
@@ -333,8 +350,8 @@ const showCalculateRectangle = () => {
   const yy1 = Math.min(p1.yy, p2.yy, p3.yy, p4.yy);
   const xx2 = Math.max(p1.xx, p2.xx, p3.xx, p4.xx);
   const yy2 = Math.max(p1.yy, p2.yy, p3.yy, p4.yy);
-  s.value = {xx1, yy1, xx2, yy2};
+  s.value = { xx1, yy1, xx2, yy2 };
-  console.log('s',  s.value);
+  console.log('s', s.value);
   coordinate.value = `${xx1},${yy1},${xx2},${yy2}`;
 };
 // 计算矩形坐标
@@ -346,7 +363,7 @@ const calculateRectangle = () => {
   const x2 = Math.max(p1.x, p2.x, p3.x, p4.x);
   const y2 = Math.max(p1.y, p2.y, p3.y, p4.y);
 
-  rectCoordinates.value = {x1, y1, x2, y2};
+  rectCoordinates.value = { x1, y1, x2, y2 };
 
   // 显示矩形（用于视觉反馈）
   rect.value = {
@@ -401,7 +418,7 @@ const startDrag = (event: MouseEvent) => {
   if (rectCoordinates.value) { // 确保矩形已绘制
     isDragging.value = true;
     allowClick.value = false; // 禁止点击
-    dragStart.value = {x: event.clientX, y: event.clientY};
+    dragStart.value = { x: event.clientX, y: event.clientY };
   }
 };
 
@@ -415,15 +432,15 @@ const onDrag = (event) => {
     rectCoordinates.value.y1 += dy;
     rectCoordinates.value.x2 += dx;
     rectCoordinates.value.y2 += dy;
-    console.log( s.value)
+    console.log(s.value)
     // 更新矩形坐标
-     s.value.xx1 += dx;
+    s.value.xx1 += dx;
-     s.value.yy1 += dy;
+    s.value.yy1 += dy;
-     s.value.xx2 += dx;
+    s.value.xx2 += dx;
-     s.value.yy2 += dy;
+    s.value.yy2 += dy;
     coordinate.value = `${s.value.xx1},${s.value.yy1},${s.value.xx2},${s.value.yy2}`;
     // 更新拖动起始点
-    dragStart.value = {x: event.clientX, y: event.clientY};
+    dragStart.value = { x: event.clientX, y: event.clientY };
     // 重新绘制矩形
     drawRectanglePath(rectCoordinates.value.x1, rectCoordinates.value.y1, rectCoordinates.value.x2, rectCoordinates.value.y2);
   }