TinyMCE富文本插入视频

file_picker_callback: function(callback, value, meta) {
            //文件分类
            var filetype = '.pdf, .jpg, .jpeg, .png, .gif, .mp3, .mp4';
            //后端接收上传文件的地址
            var upurl = '/qdswj_resources/media/upload';
            //为不同插件指定文件类型及后端地址
            switch (meta.filetype) {
                case 'image':
                    upurl = '/qdswj_resources/media/uploadImg';
                    filetype = '.jpg, .jpeg, .png, .gif';
                    break;
                case 'media':
                    upurl = '/qdswj_resources/media/uploadMedia';
                    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];
                var fileSize = file.size / 1024
                //判断文件上传大小
                if(meta.filetype=='image'){
                    /*图片*/
                    if (fileSize > 3072) {
                        layer.msg("上传图片不能大于3M!");
                        return false;
                    }
                }else{
                    /*视频*/
                    if (fileSize > 102400) {
                        layer.msg("上传视频不能大于100M!");
                        return false;
                    }
                }
                //上传加载
                layui.use('layer', function(){ //独立版的layer无需执行这一句
                    var layer = layui.layer;
                    layer.load({
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                    var xhr, formData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', upurl);
                    xhr.onload = function() {
                        var json;
                        if (xhr.status != 200) {
                            layer.closeAll('loading');
                            // failure('HTTP Error: ' + xhr.status);
                            return;
                        }
                        json = JSON.parse(xhr.responseText);
                        if (!json || typeof json.location != 'string') {
                            // failure('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        layer.closeAll('loading');
                        // callback传入上传成功的视频链接,title传入文件名
                        callback(encodeURI(json.location), {
                            title: file.name
                        });
                    };
                    formData = new FormData();
                    formData.append('file', file, file.name);
                    xhr.send(formData);

                });

            };
        },
        media_url_resolver: function(data, resolve) {
            try {
                var videoUri = encodeURI(data.url);
                if(data.url.indexOf('.mp4')>-1) {
                    // 判断是否mp4  否则用ifarme嵌套
                    var embedHtml = '<p style="text-align: center">'
                        +'<video src="'+data.url+'" width="100%" height="auto" style="max-width: 100%;" allowfullscreen="false" controls="controls" controlslist="nodownload"></video>'
                        +'</p>';
                    resolve({ html: embedHtml });
                }else {
                    var 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: "" });
            }
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hello.鑫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值