关于Vue使用tinymce富文本框上传本地图片视频心得总结

小华开发日记1
使用的是vue-admin里面的应用方式通过scnd来应用具体的操作，自己去看
vue-damin中的源码，这里只是介绍文件本地图片视频

• 1.在init中设置 file_picker_types: ‘image media’, 这里是允许上传图片和视频
• 2.file_picker_callback: function(callback, value, meta) {}添加这个函数
• 3.（设置完以上2步后就会出现文件上传的图标）

在data（）中设置需要上传的文件图片文件地址（resimg）和视频文件地址（resVideo）如下：

data() {
        return {
            resimg:'',      //上传img的url
            resVideo:'',    //上传视频的url
            uploaded:false,//有没有上传完成
            hasChange: false,
            hasInit: false,
            tinymceId: this.id,
            fullscreen: false,
            languageTypeList: {
                'en': 'en',
                'zh': 'zh_CN',
                'es': 'es_MX',
                'ja': 'ja'
            }
        }
    },

在initTinymce中添加回调（tinymce本身是不支持本地的是自己调用函数来促进）

initTinymce() {
        const _this = this
        window.tinymce.init({
            selector: `#${this.tinymceId}`,
            file_picker_types: 'image media',
            file_picker_callback: function(callback, value, meta) {
                if (meta.filetype == 'image') {
                    let input = document.createElement('input');//创建一个隐藏的input
                    input.setAttribute('type', 'file');
                    // let that = this;
                    input.onchange = function(){
                        let file = this.files[0];//选取第一个文件
                        // console.log(file)
                        _this.uploadImg(file,'image'); // 上传视频拿到url
                        if(_this.uploaded){
                            // _this.resVideo, 
                            console.log(_this.resimg,'true')
                            callback(_this.resimg) //将url显示在弹框输入框中
                        }else{
                            setTimeout(()=>{
                                //设置几秒后再去取数据
                                console.log(_this.resimg,'false')
                                callback(_this.resimg)
                            },5000)
                        }
                    }
                    //触发点击
                    input.click();
                }

                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];//选取第一个文件
                        // console.log(file)
                        _this.uploadImg(file,'media'); // 上传视频拿到url
                        if(_this.uploaded){
                            // _this.resVideo, 
                            console.log(_this.resVideo,'true')
                            callback(_this.resVideo) //将url显示在弹框输入框中
                            
                        }else{
                            setTimeout(()=>{
                                //设置几秒后再去取数据
                                console.log(_this.resVideo,'false')
                                callback(_this.resVideo)
                            },5000)
                        }
                    }
                    //触发点击
                    input.click();
                }
            },

在methods中添加上传的

uploadImg(file,type){
            // console.log(token,file,type,)
                let content = file
                let formData = new FormData();
                formData.append('files', content);
                axios({
                    method: "post",
                    //服务器上传地址
                    url: ,
                    data: formData,
                    headers: {
                    // 修改请求头
                    "Content-Type": "multipart/form-data"
                    }
                }).then(res => {
                    console.log(res);
                    if(res.data.success){
                        if(type == 'image') {
                            this.resimg = res.data.fileUrl
                        }else if (type == 'media'){
                            this.resVideo = res.data.fileUrl
                        }
                        this.uploaded = true
                    }
                    })
        },

以下我参考的文章：

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){
  	  ......代码......
    }
  }
}

出自：https://blog.csdn.net/u010007013/article/details/102752497