vue3项目使用tinymce作为编辑器，tinymce默认的视频是不能上传的，仅支持网络地址，官方插件也看了下，没有视频上传插件。客户要求必须能够上传，而且还要限制上传大小。没办法，就自己研究了下，最终实现效果如下：
1、新建插件文件utils.js，代码如下，解释就放在注释里：
/* eslint-disable */
import { ElLoading, ElMessage } from 'element-plus'
import axios from 'axios'
import tool from '@/utils/tool'
import DEFAULT_CONFIG from '@/config/index'
// 创建一个上传框，并return出去
function createInput(accept) {
const input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', accept)
return input
}
// axios上传文件
function uploadToOss(file) {
return new Promise((resolve, reject) => {
let param = new FormData()
param.append('file',file)
let Authorization = ''
if (tool.data.get("TOKEN")) {
Authorization = tool.data.get("TOKEN")
} else {
Authorization = 'Basic dnVlOnZ1ZQ=='
}
let config = {
headers:{
// 上传一定要有这个form-data
'Content-Type':'multipart/form-data',
Authorization
}
}
axios.post('/api/tool/oss/upload', param, config).then(res=>{
// 上传后处理，直接将最终的url resolve出去
if(res.status === 200 && res.data) {
if(res.data.status === 200) {
resolve(res.data.data)
} else {
reject(res.data)
}
} else {
reject(res)
}
}).catch(e => {
reject(e)
})
})
}
// 导出插件
export const uploadVideoPlugin = (editor) => {
editor.ui.registry.addButton('uploadVideo', {
// 这个icon是tinymce自带的，更多icon可见：node_modules/tinymce/icons/default/icons.js，当然也能自己定义，详见https://www.tiny.cloud/docs/tinymce/7/custom-basic-toolbar-button/
icon: 'embed',
tooltip: '上传视频',
// onAction是插件被点击时的回调
onAction: function () {
const input = createInput('.mp4, .webm, .ogg')
// 自动点击
input.click()
input.onchange = async function () {
const file = this.files[0]
const size = file.size/1024/1024
// 限制上传大小，根据自己的情况而定
if(size >= 50) {
ElMessage.error('视频不能超过50M')
return
}
// loading
const loadingInstance = ElLoading.service({
fullscreen: true
})
// 调用上传方法
uploadToOss(file).then((url) => {
// 获取到编辑器实例，如果你的项目使用了eslint，这里可能报错，tinymce未定义，在文件头部加个注释“/* eslint-disable */”
const activeEditor = tinymce.activeEditor
// 将视频插入到编辑器，这里的地址直接拼全路径，根据自己需求决定
activeEditor.insertContent(`<video controls name="media" style="width:100%; height: auto;"><source src="https://5imoban.oss-cn.aliyuncs.com${url}"></video>`)
// 关闭loading
loadingInstance.close()
}).catch(e => {
console.log(e)
ElMessage.error('上传失败')
loadingInstance.close()
})
}
}
})
}
2、引入并使用自定义的tinymce上传插件
/* 引入视频上传插件 */
import { uploadVideoPlugin } from './utils'
/* 注册上传插件 */
tinymce.PluginManager.add('uploadVideo', uploadVideoPlugin)
export default {
props: {
plugins: {
type: [String, Array],
// 这里加入 uploadVideo
default: 'uploadVideo image link table quickbars pagebreak lists advlist'
},
toolbar: {
type: [String, Array],
// 工具栏配置 uploadVideo
default: 'undo redo | forecolor backcolor bold italic underline strikethrough link image uploadVideo | blocks fontfamily fontsize | \
alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
table selectall'
},
},
// 更多代码...
}