tinymce编辑器上传本地视频

直接上代码：

plugins和toolbar要加上 media，然后通过file_picker_callback和media_url_resolver进行处理

 tinymce.init({
        file_picker_callback: function(callback, value, meta) {
                    //文件分类
                    var filetype = '.pdf, .jpg, .jpeg, .png, .gif, .mp3, .mp4';
                    //后端接收上传文件的地址
                    var upurl = upload_url1 +'&upload_type=video';
                    //为不同插件指定文件类型及后端地址
                    switch (meta.filetype) {
                        case 'image':
                            upurl = upload_url1 +'&upload_type=image';
                            filetype = '.jpg, .jpeg, .png, .gif';
                            break;
                        case 'media':
                            filetype = '.mp3, .mp4';
                            break;
                        case 'file':
                        default:
                    }
                    //模拟出一个input用于添加本地文件
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', filetype);
                    input.click();
                    input.onchange = function() {
                        var file = this.files[0];
                        const loading = component.$loading({
                            lock: true,
                            text: '正在上传',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        var xhr, formData;
                        // console.log(file, file.name);
                        xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', upurl);
                        xhr.onload = function() {
                            var json;
                            if (xhr.status != 200) {
                                loading.close();
                                // failure('HTTP Error: ' + xhr.status);
                                return;
                            }
                            json = JSON.parse(xhr.responseText);
                            if (!json || typeof json.location != 'string') {
                                // failure('Invalid JSON: ' + xhr.responseText);
                                return;
                            }
                            loading.close();
                            // callback传入上传成功的视频链接，title传入文件名
                            callback(encodeURI(json.location), {
                                title: file.name
                            });
                        };
                        formData = new FormData();
                        formData.append('file', file, file.name);
                        xhr.send(formData);
                    };
                },
                media_url_resolver: (data, resolve)=> {
                    try {
                        let videoUri = encodeURI(data.url);
                        if(data.url.indexOf('.mp4')>-1) {
                            // 判断是否mp4  否则用ifarme嵌套
                            let embedHtml = `<p>
                                    <video src=${ data.url } width="100%" height="auto" style="max-width: 100%;" allowfullscreen="false" controls="controls" controlslist="nodownload">
                                    </video>
                                </p>`;
                            resolve({ html: embedHtml });
                        }else {
                            let embedHtml = `<p>
                                    <iframe frameborder="0" src=${ data.url } width="100%" height="100%" style="max-width: 100%;">
                                    </iframe>
                                </p>`;
                            resolve({ html: embedHtml });
                        }
                        
                    } catch (e) {
                        resolve({ html: "" });
                    }
                },
})

 

参考：

http://tinymce.ax-z.cn/plugins/media.php

https://www.geekschool.org/2020/07/13/7468.html

https://www.jianshu.com/p/08bb485bf691

https://blog.csdn.net/Sarahhoney12_/article/details/85629014

https://blog.csdn.net/weixin_42674576/article/details/105122719