跳到主要内容

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

· 阅读需 5 分钟
大刘
大刘
一个 web 开发者

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

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

需要满足的功能：

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

支持插入视频功能​

基于 Ueditor 编辑器强大的可定制化的功能，支持插入视频功能非常简单。在 ueditor/ueditor.config.js 的 toolbars 添加 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   lzw 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   lzw 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   lzw 2017-09-11 **/
        editor.execCommand('insertvideo', {
            url: convert_url(url),
            width: width.value,
            height: height.value,
            align: align
        }, isModifyUploadVideo ? 'upload':null);
    }///**处理通用视频代码 iframe   lzw 2017-09-11 **/
}
...
/**
 * 根据 url 生成视频预览
 * 修改：处理通用视频代码 iframe   lzw 2017-09-11
 * @param url
 */
function createPreviewVideo(url){
    if ( !url )return;
    /** 处理通用视频代码 iframe   lzw 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   lzw 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   lzw 2017-09-11 **/
...

大家可以自行比较下，绝对

有区别，但是决不会影响 Ueditor 的正常功能。但这里还需要比较重要的一步，添加过滤白名单。在 ueditor/ueditor.config.js 的 whitList 添加白名单。

// 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']
}

到这里就大功告成了。