tinymce富文本编辑器的视频插件如何上传本地视频

最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频。为此,我专门研究下如何上传本地视频。
版本:tinymce版本是^5.0.16,@tinymce/tinymce-vue版本是 ^3.0.1。
1.需要设置file_picker_typesmedia
file_picker_types让你指定你需要的上传类型,包括file,image,media三种有效类型,这里指定为media类型。
2.需要设置file_picker_callback
在tinymce5.0版本中这个钩子函数代替了原来的file_browser_callback,有三个参数:callback 、value 、meta,其中callback的作用是将所选择的视频的url显示在输入框中。
示例代码:



import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/media'// 插入视频插件
export default{
  components:{
    Editor
  },
  data(){
    tinymceHtml:'',
  	qiniuToken:null,//七牛云token
  	resVideo:null,//七牛云返回的视频url
	uploaded:false,//有没有上传完成
  	editorInit:{
	   plugins: 'media',
	   toolbar:'media',
	   file_picker_types: 'media',
	   file_picker_callback: (callback, value, meta)=> {
         if(meta.filetype == 'media'){  
           let input = document.createElement('input');//创建一个隐藏的input
           input.setAttribute('type', 'file');
           let that = this;
           input.onchange = function(){
             let file = this.files[0];//选取第一个文件
             that.uploadImg(that.qiniuToken, file, 'video'); // 上传视频拿到url
             if(that.uploaded){
               callback(that.resVideo, { title: file.name }) //将url显示在弹框输入框中
             }else{
               setTimeout(()=>{
                 callback(that.resVideo, { title: file.name })
               },2000)
             }
           }
           //触发点击
           input.click();
         }
       } 
	}
  },
  methods:{
    // 上传视频拿到url
  	uploadImg(token,file,type){
  	  ......代码......
    }
  }
}

效果如下:
tinymce富文本编辑器的视频插件如何上传本地视频_第1张图片

你可能感兴趣的:(tinymce)