八九社区 首页 教程频道

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

2019-7-2 10:30

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

 
那么动手做点小小的改动,让UEditor支持直接插入通用视频代码吧
主要就是改ueditor/dialogs/video/video.js
再具体一点,就是改其中的两个function
    /**
     * 将单个视频信息插入编辑器中
     * 修改:处理通用视频代码iframe   BY 20190702
     */
    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 20190702
     * @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>';
        }
    }
 video.js 附件

路过

雷人

握手

鲜花

鸡蛋
粉丝 阅读28 回复0
上一篇:
解决Apache日志"internal dummy connection"方法发布时间:2019-07-02
下一篇:
分析Apache日志文件,统计各种实用信息发布时间:2019-07-03

周一至周日9:00-18:00

反馈建议

service#bjjem.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! © 2001-2019