wo123/gushidianzibao-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
王创世 2025-04-16 10:38:48 +08:00
parent 776dbb5c69
commit be7c359f6c
2 changed files with 82 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/paper/article/index.vue
View File

@ -140,9 +140,6 @@ const toolbarConfig = {
showLinkImg: false, showLinkImg: false,
uploadImgShowBase64: true, uploadImgShowBase64: true,
excludeKeys: [ excludeKeys: [
'insertVideo', // 删除视频
'uploadVideo',
'group-video',
'insertImage',// 删除网络图片上传 'insertImage',// 删除网络图片上传
'insertLink',// 删除链接 'insertLink',// 删除链接
'insertTable',// 删除表格 'insertTable',// 删除表格
@ -172,6 +169,25 @@ const editorConfig = {
koiNoticeError('图片限制为1M，请调整好再上传！'); 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，请调整好再上传！');
}
},
} }
} }
} }

25
src/views/paper/article/update.vue
View File

@ -5,7 +5,8 @@
<el-col :span="8"> <el-col :span="8">
<div style="padding: 0px 20px 20px 0px;font-weight: 600">请在图片边框内选定区域</div> <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" <img draggable="false" id="image-selector" :src="bmInfoData.bm_img" ref="image" alt="image"
@click="handleClick" @click="handleClick"
@ -179,9 +180,6 @@ const toolbarConfig = {
showLinkImg: false, showLinkImg: false,
uploadImgShowBase64: true, uploadImgShowBase64: true,
excludeKeys: [ excludeKeys: [
'insertVideo', // 删除视频
'uploadVideo',
'group-video',
'insertImage',// 删除网络图片上传 'insertImage',// 删除网络图片上传
'insertLink',// 删除链接 'insertLink',// 删除链接
'insertTable',// 删除表格 'insertTable',// 删除表格
@ -211,6 +209,25 @@ const editorConfig = {
koiNoticeError('图片限制为1M，请调整好再上传！'); 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，请调整好再上传！');
}
},
} }
} }
} }