百度UEditor添加视频 增加支持“通用代码”功能，支持微信

今天发现用UEditor默认的添加视频，在微信内置浏览器里无法正常显示。估计是微信屏蔽了UEditor使用的<embeded>标签。插入iframe形式的通用代码则能正常显示。

用百度UEditor可以插入iframe，流程如下：

 1.找到视频的“通用代码”，比如腾讯的

2.在通用代码里找到src="xxxxxxxxxxxxx"，把这个双引号里面的内容复制下来

3.打开文章编辑器，点“插入iframe”按钮

然后在地址栏右键粘贴，并输入宽度高度，最后点击确定 

 

那么问题来了，作为一个懂点html的码农，看懂这一段iframe代码，从中找出src属性内容，都是最最基本的技能，跟吃饭一样。但是对于使用这个编辑器的用户来说，他肯定要说“什么？还要学html？WTF！”。

 

那么动手做点小小的改动，让UEditor支持直接插入通用视频代码吧

闲话少说，上代码：

主要就是改ueditor/dialogs/video/video.js

再具体一点，就是改其中的两个function

    /**
     * 将单个视频信息插入编辑器中
     * 修改：处理通用视频代码iframe   BY oceanking 20150309
     */
    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;
        
        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);
            console.log(div.innerHTML);
            editor.execCommand("inserthtml",div.innerHTML);
        } else {
            editor.execCommand('insertvideo', {
                url: convert_url(url),
                width: width.value,
                height: height.value,
                align: align
            }, isModifyUploadVideo ? 'upload':null);
        }
    }

    /**
     * 根据url生成视频预览
     * 修改：处理通用视频代码iframe   BY oceanking 20150309
     * @param url
     */
    function createPreviewVideo(url){
        if ( !url )return;
        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="' + conUrl + '"' +
                ' width="' + 420  + '"' +
                ' height="' + 280  + '"' +
                ' frameborder=0 allowfullscreen>' +
            '</iframe>';
        } else {
            var conUrl = convert_url(url);

            $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="' + conUrl + '"' +
                ' width="' + 420  + '"' +
                ' height="' + 280  + '"' +
                ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
            '</embed>';
        }
    }