vue3+wangEditor5自定义上传音频+视频

# 框架集成 # eslint用于代码规范校验 以及prettierrr用于代码格式统一 ``` js npm install eslint eslint-config-prettier eslint-plugin-vue eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser vite-plugin-eslint --save-dev ``` # css 集成:使用UnoCSS原子化CSS ## unocss查询网址 https://www.tailwindcss.cn/docs/installation https://uno.antfu.me/ ## 图标网址 https://icones.netlify.app/ https://iconify.design/ ``` js npm install @unocss/preset-icons unocss @iconify/json --save-dev ``` # Vue3自适应瀑布流 --vue-masonry ```js 1.安装 npm install vue-masonry --save 2. main.js import {VueMasonryPlugin} from 'vue-masonry'; app.use(VueMasonryPlugin) 属性说明 item-selector=".item" -列表元素DOM项目选择器 transition-duration="0.3s -过渡期 column-width="#test"-列宽的元素选择器。可以是选择器字符串或数字 origin-left="false" -设置为将元素分组到右侧而不是默认情况下的左侧 gutter=".gutter-block-selector"-指定[项目元素之间的水平间距 fit-width="true" -设置容器的宽度以适合可用的列数 horizontal-order="true" -布置物品以（大部分）保持水平的从左到右的顺序 ``` 3.组件使用 ```vue <template> <div style="width: 100%; margin: auto"> <div v-masonry fit-width="true" transition-duration="0.3s" item-selector=".card" origin-left="false" class="pets" > <div v-masonry-tile v-for="pet in resultList" :key="pet.id" class="card"> <el-card> <div>{{ pet.title }}</div> </el-card> </div> </div> </div> </template> <script setup name="ProjectList"> const resultList = ref([ { id: 'B9B41B5CCCF54A0A8A5BFC69A15A2E1A', title:'测试1' }, { id: 'B9B41B5CCCF54A0A8A5BF', title:'测试2' } ]) </script> <style scoped lang="scss"> .card { width: 100%; max-width: 250px; margin: 0.25em; } </style> ``` # 编辑器整合 ## TinyMCE 上传视频 是编写地址的 ## Quill 上传视频 是编写地址的;图片上传没有限制图片大小（要结合插件，但是插件不好整合vite） ## WangEditor ``` js 1. 上传视频 源码有问题，修改修改源码【依赖包makereditor或者zhangeditor(别人的)】 2. 网络上传图片【图片能访问的 才可以上传】 3. customUpload自定义上传跟插件自带的上传工具 2个不能一起用 const editorConfig = { placeholder: '请输入内容1...', MENU_CONF: { // 上传本地图片 uploadImage: { /**插件自定义事件 start */ server: 'http://192.168.3.56:81/dev-api/file/attachFile/attachUpload', fieldName: 'file', maxFileSize: 1 * 1024 * 1024, // 1M allowedFileTypes: ['.jpg, .png, .gif, .jpeg'], base64LimitSize: 5 * 1024, maxNumberOfFiles: 1, headers: { Authorization: 'Bearer ' + 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImE0NDg4OTJjLTBiMTYtNDg0YS05MTM2LTc4YzBmZWY4N2Y1MSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.KZCY_ye9WQf00rYQR8ECHGiOaIRRBllvmCu3-8haLcZ27IOjOiuTc1fYjvS0G82NbD0S8raTWOcpFYW-iCxaEA' }, customInsert(res, insertFn) { console.log(editorRef.value.getConfig(), '-22--') console.log('customInsert', res) const imgInfo = res.data || {} const { url } = imgInfo insertFn(url) }, // 单个文件上传失败 onFailed(file, res) { console.log(`${file.name} 上传失败`, res) }, onSuccess(file, res) { console.log(`${file.name} 上传成功`, res) }, // 上传错误，或者触发 timeout 超时 onError(file, err, res) { proxy.$modal.msgError(res) console.log(res) } /**插件自定义事件 end*/ /**自定义上传功能 * * @param {*} file 文件 * @param {*} insertFn 输入到编辑器 */ // customUpload(file, insertFn) { // console.log(editorRef.value.getConfig(), '---') // // if (file.size / 1024 / 1024 > 5) { // // proxy.$modal.msgError('单个文件不能超过5MB!') // // return false // // } // // // 把图片转成base64 // // getBase64(file, url => { // // insertFn(url) // // }) // } } } } const toolbarConfig = { // 配置 toolbar 的工具 toolbarKeys: [] } // 富文本框内容校验 checkEditor(str) { if (!str) { return; } // str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白 // str = str.replace(/[ ]|[&nbsp;]/g, '');//去除&nbsp; // str = str.replace(/ /ig, '');//去掉 // console.log(str); return str; } ``` 音频：http://192.168.1.110:9000/attach/2023/07/03/音频_20230703152644A214.mp3 https://www.runoob.com/try/demo_source/horse.mp3 视频：http://192.168.1.110:9000/attach/2023/07/03/视频_20230703152728A215.mp4 https://www.runoob.com/try/demo_source/movie.ogg 图片：https://img2.baidu.com/it/u=3329909248,3799019568&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500 ## v-md-editor 没有上传视频 npm i makereditor --save-dev npm install @wangeditor/editor-for-vue@next --save npm install @wangeditor/editor --save 图片： 本地上传 图片 有请求接口 ：存在素材库