解决ueditor插入第三方视频网站通用代码的问题

百度ueditor编辑器使用非常广泛,由此衍生的各种定制化的编辑器也非常多,如微信公众号文章编辑器等都是基于ueditor编辑器开发的,但官方维护的是通用的pc编辑器,有些格式不适应移动h5页面显示,比如图片自适应,不能插入第三方网站视频通用代码等。因此,也需要进行必要的修改来满足定制化的需求。

所谓第三方视频网站通用代码,就是视频网站提供分享功能时,可选择html代码,通过代码等,通用代码可以兼容手机播放,比如在iPhone,ipad上播放

需要满足的功能:

  • 支持插入视频功能
  • 视频播放兼容手机播放,如iPhone

支持插入视频功能

基于ueditor编辑器强大的可定制化的功能,支持插入视频功能非常简单
ueditor/ueditor.config.jstoolbars添加 insertvideo即可

//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义
, toolbars: [[...'insertvideo',]]

视频播放兼容手机播放

这里主要是插入第三方视频播放器,而且为了兼容手机播放,会使用第三方视频网站通用代码(可以在视频播放页-分享-通用代码中获取),一般格式如下:

<iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=y0016tj0qvh&tiny=0&auto=0" allowfullscreen></iframe>

ueditor编辑器视频网址默认的不支持插入iframe格式,这里需要修改下源码
路径:ueditor/dialogs/video/video.js ,修改的地方如下:

...
/**
 * 将单个视频信息插入编辑器中
 * 修改:处理通用视频代码iframe   awei 2017-09-11
 */
function insertSingle(){
    var width = $G("videoWidth"),
        height = $G("videoHeight"),
        url=$G('videoUrl').value,
        align = findFocus("videoFloat","name");
    if(!url) return false;
    if ( !checkNum( [width, height] ) ) return false;
    
    /**处理通用视频代码iframe   awei 2017-09-11 **/
    url = utils.trim(url);
    if(/^<iframe/.test(url)){
        var conUrl = '';
        if(/src="[^s"]+/i.test(url)){
            conUrl = url.match(/src="[^s"]+/i)[0].substr(5);
        }
        var newIframe = editor.document.createElement("iframe");
        var div;
        newIframe.setAttribute("src",/http://|https:///ig.test(conUrl) ? conUrl : "http://"+conUrl);
        /^[1-9]+[.]?d*$/g.test( width.value ) ? newIframe.setAttribute("width",width.value) : "";
        /^[1-9]+[.]?d*$/g.test( height.value ) ? newIframe.setAttribute("height",height.value) : "";
        //newIframe.setAttribute("scrolling","no");
        newIframe.setAttribute("frameborder","0",0);
        newIframe.setAttribute("allowfullscreen","allowfullscreen");
        newIframe.setAttribute("align",align);
        div = editor.document.createElement("div");
        div.appendChild(newIframe);
        //alert(div.innerHTML);
        console.log(div.innerHTML);
        editor.execCommand("inserthtml",div.innerHTML,true);
    } else {/** -end 处理通用视频代码iframe   awei 2017-09-11 **/
        editor.execCommand('insertvideo', {
            url: convert_url(url),
            width: width.value,
            height: height.value,
            align: align
        }, isModifyUploadVideo ? 'upload':null);
    }///**处理通用视频代码iframe   awei 2017-09-11 **/
}
...
/**
 * 根据url生成视频预览
 * 修改:处理通用视频代码iframe   awei 2017-09-11
 * @param url
 */
function createPreviewVideo(url){
    if ( !url )return;
    /** 处理通用视频代码iframe   awei 2017-09-11 **/
    url = utils.trim(url);
    if(/^<iframe/.test(url)){
        var conUrl = '';
        if(/src="[^s"]+/i.test(url)){
            conUrl = url.match(/src="[^s"]+/i)[0].substr(5);
        }
        $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
        '<iframe class="previewVideo"' +
            ' src="'%20+%20conUrl%20+%20'"' +
            ' width="' + 420  + '"' +
            ' height="' + 280  + '"' +
            ' frameborder=0 allowfullscreen>' +
        '</iframe>';
    } else {/** -end 处理通用视频代码iframe   awei 2017-09-11 **/
        var conUrl = convert_url(url);

        conUrl = utils.unhtmlForUrl(conUrl);

        $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
        '<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
            ' src="'%20+%20conUrl%20+%20'"' +
            ' width="' + 420  + '"' +
            ' height="' + 280  + '"' +
            ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
        '</embed>';
    }
}///** 处理通用视频代码iframe   awei 2017-09-11 **/

...

大家可以自行比较下,绝对有区别,但是决不会影响ueditor的正常功能,但这里还需要比较重要的一步,添加过滤白名单
ueditor/ueditor.config.jswhitList 添加白名单

// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
,whitList: {
	...
	iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']
}

到这里就大功告成了。

爱生活,爱技术

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注