百度編輯器 ueditor 上傳視頻添加網址預覽 與 文章內視頻預覽的完善

版本：ueditor1_4_3_3-utf8-php

頁面引入文件：ueditor/ueditor.config.js

                         ueditor/ueditor.all.js

問題1： 上傳視頻時，輸入有效視頻網址，顯示“輸入的視頻地址有誤，請檢查后再試！”的問題！

　　　　修改 ueditor/dialogs/video/video.js文件

　　　　　　將文檔內大概在 275 行 的代碼：

$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>';

　　　　　　修改為：

$.ajax({
            url : conUrl,
            type : 'HEAD',
            error : function() {

                $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>' +
        '<embed' +
            ' src="' + conUrl + '"' +
            ' width="' + 420  + '"' +
            ' height="' + 280  + '"' +
            ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
        '</embed>';
            },
            success : function() {
                $G("preview").innerHTML = 
        '<embed' +
            ' src="' + conUrl + '"' +
            ' width="' + 420  + '"' +
            ' height="' + 280  + '"' +
            ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
        '</embed>';
            }
        });

 

修改后文件 (ueditor/dialogs/video/video.js)

/**
     * 根據url生成視頻預覽
     * @param url
     */
    function createPreviewVideo(url){
        if ( !url )return;

        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="' + conUrl + '"' +
        //     ' width="' + 420  + '"' +
        //     ' height="' + 280  + '"' +
        //     ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
        // '</embed>';
        $.ajax({
            url : conUrl,
            type : 'HEAD',
            error : function() {
 
                $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>' +
        '<embed' +
            ' src="' + conUrl + '"' +
            ' width="' + 420  + '"' +
            ' height="' + 280  + '"' +
            ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
        '</embed>';
            },
            success : function() {
                $G("preview").innerHTML =
        '<embed' +
            ' src="' + conUrl + '"' +
            ' width="' + 420  + '"' +
            ' height="' + 280  + '"' +
            ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
        '</embed>';
            }
        });
    }

 

截圖

 

 

 

 

問題2： 編輯器內無法預覽上傳的視頻問題

　　　　轉自：https://blog.csdn.net/belen_xue/article/details/73252802

 

　　　　　　　　先來看具體的bug情況：

　　　　　　　　在插入視頻里放入地址后，正常顯示在插入視頻里，這個時候是正常的

　　　　　　　　

　　　　　　　　但插入后會顯示下圖，視頻沒有正常的預覽，這是因為設置插入編輯器里的不是視頻的代碼，而是image圖片的代碼

　　　　　　　　

 

　　　　　　　　這個時候如果進入源碼看的話，會發現里面是空的，根本什么都沒有

　　　　　　　　

 

 

　　　　　　　　在進入編輯器的預覽會發現之前的圖片都消失了

　　　　　　　　

 

 

　　

　　　　　　　　出現這種情況是由於編輯器沒有開放視頻插入的代碼的白名單，所以會被過xss濾掉

 

　　　　　　　　解決方案：

　　　　　　　　　　首先在ueditor.config.js文件里增加xss過濾白名單：

　　　　

　　在這里的末尾加上下列在插入視頻中使用的代碼：

source: ['src', 'type'],  
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],  
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

 

 

 

修改后文件 (ueditor.config.js)

// xss過濾白名單 名單來源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
        ,whitList: {
            a:      ['target', 'href', 'title', 'class', 'style'],
            abbr:   ['title', 'class', 'style'],
            address: ['class', 'style'],
            area:   ['shape', 'coords', 'href', 'alt'],
            article: [],
            aside:  [],
            audio:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style'],
            b:      ['class', 'style'],
            bdi:    ['dir'],
            bdo:    ['dir'],
            big:    [],
            blockquote: ['cite', 'class', 'style'],
            br:     [],
            caption: ['class', 'style'],
            center: [],
            cite:   [],
            code:   ['class', 'style'],
            col:    ['align', 'valign', 'span', 'width', 'class', 'style'],
            colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'],
            dd:     ['class', 'style'],
            del:    ['datetime'],
            details: ['open'],
            div:    ['class', 'style'],
            dl:     ['class', 'style'],
            dt:     ['class', 'style'],
            em:     ['class', 'style'],
            font:   ['color', 'size', 'face'],
            footer: [],
            h1:     ['class', 'style'],
            h2:     ['class', 'style'],
            h3:     ['class', 'style'],
            h4:     ['class', 'style'],
            h5:     ['class', 'style'],
            h6:     ['class', 'style'],
            header: [],
            hr:     [],
            i:      ['class', 'style'],
            img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],
            ins:    ['datetime'],
            li:     ['class', 'style'],
            mark:   [],
            nav:    [],
            ol:     ['class', 'style'],
            p:      ['class', 'style'],
            pre:    ['class', 'style'],
            s:      [],
            section:[],
            small:  [],
            span:   ['class', 'style'],
            sub:    ['class', 'style'],
            sup:    ['class', 'style'],
            strong: ['class', 'style'],
            table:  ['width', 'border', 'align', 'valign', 'class', 'style'],
            tbody:  ['align', 'valign', 'class', 'style'],
            td:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
            tfoot:  ['align', 'valign', 'class', 'style'],
            th:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
            thead:  ['align', 'valign', 'class', 'style'],
            tr:     ['rowspan', 'align', 'valign', 'class', 'style'],
            tt:     [],
            u:      [],
            ul:     ['class', 'style'],
            video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
            source: ['src', 'type'], 
            embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'], 
            iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

 截圖

 

 

 

 

 

 

 

 

 

　　另外由於插入的代碼不是視頻，那么首先要找到插入編輯器代碼的代碼，位置在ueditor.all.js里，如果引用的是uedior.min.js就需要在這里找，找到以下代碼:

 　　

修改文件(ueditor.all.js)

me.commands["insertvideo"] = {
        execCommand: function (cmd, videoObjs, type){
            videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
            var html = [],id = 'tmpVedio', cl;
            for(var i=0,vi,len = videoObjs.length;i<len;i++){
                vi = videoObjs[i];
                cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
                // html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));
                html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'embed'));
            }
            me.execCommand("inserthtml",html.join(""),true);
            var rng = this.selection.getRange();
            // for(var i= 0,len=videoObjs.length;i<len;i++){
            //     var img = this.document.getElementById('tmpVedio'+i);
            //     domUtils.removeAttributes(img,'id');
            //     rng.selectNode(img).select();
            //     me.execCommand('imagefloat',videoObjs[i].align)
            // }
        },
        queryCommandState : function(){
            var img = me.selection.getRange().getClosedNode(),
                flag = img && (img.className == "edui-faked-video" || img.className.indexOf("edui-upload-video")!=-1);
            return flag ? 1 : 0;
        }
    };

 截圖

 

　　　　　　　

　　　改完這里后會發現插入視頻地址后，雖然編輯器可以看到視頻了，但是插入視頻的窗口不能關閉了

 

　　　之所以會出現這個問題是因為改動embed后，下面紅框的代碼無法正常找到image標簽及其里面的屬性導致的，這里只要注釋紅框的內容就可以解決插入視頻框無法自動關閉的問題。

 

 

　　　接着往下看，除開這個bug外，還有新的問題，下面我們來看看點擊源碼再回到編輯器預覽里會發生什么。

 

　　從上面的圖上可以看出，去源碼里已經視頻代碼不會被過濾了，但是回到編輯器卻是一片空白，這是怎么回事呢？

　　問題出在紅框里的這段代碼里：type="application/x-shockwave-flash" class="edui-faked-video" pluginspage="http://www.macromedia.com/go/getflashplayer"

　　type規定了flash格式，我插入的是flash所以沒問題，pluginspage是提供用戶flash下載地址的（有些用戶沒有安裝flash插件或者沒有及時更新），那么問題是在class里了，因為ediu-faked-video會告訴編輯器這不是一個視頻，因此會刪除embed里的src的鏈接，因此回到編輯器預覽會出現白板。

 

　　　網上其他的答案是把ediu-faked-video改成ediu-video，但我不建議，因為只能解決部分問題而已，還有其他的bug，例如如果上傳的視頻是mp4格式怎么辦，另外改動的地方不止樣一處，還是有問題，因此我建議改動ueditor.all.js里的下圖紅框部分

 

　　這里是判斷如果點擊視頻上傳需要導入的是embed代碼的情況，之前是image，我們改成了embed，因此這里switch得到的是embed的代碼模板，在這里我們去掉

type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +'  

　　

 

修改文件(ueditor.all.js)

switch (type){
            case 'image':
                str = '<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="' + classname.replace(/\bvideo-js\b/, '') + '"'  +
                    ' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+'" />'
                break;
            // case 'embed':
            //     str = '<embed type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
            //         ' src="' +  utils.html(url) + '" width="' + width  + '" height="' + height  + '"'  + (align ? ' style="float:' + align + '"': '') +
            //         ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
            //     break;
            case 'embed':
                str = '<embed src="' +  utils.html(url) + '" width="' + width  + '" height="' + height  + '"'  + (align ? ' style="float:' + align + '"': '') +
                    ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
                break;
            case 'video':
                var ext = url.substr(url.lastIndexOf('.') + 1);
                if(ext == 'ogv') ext = 'ogg';
                str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
                    ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
                    '<source src="' + url + '" type="video/' + ext + '" /></video>';
                break;
        }

截圖

 插入視頻

 

上傳視頻后

 

 

 

　　更改好后，刷新一下，我們再來看看插入視頻后進入源碼然后再回到編輯器預覽狀態下已經沒有問題了，可以正常預覽，紅框里的代碼的src內容已經不會被過濾了：

　　另外上傳視頻也可以正常運作，如果是按照網上改edui-faked那種，這里如果傳的是MP4等其他格式的就會出問題。