修復 UEditor 上傳視頻的相關問題

相關問題：

1.上傳後無法播放的問題

2.編輯後視頻丟失的問題

3.切換 html 按鈕src鏈接丟失問題

4.插入視頻後預覽出錯的問題

解決方案：

1. 打開 ueditor.all.js 文件，搜索 me.commands["insertvideo"]

1. 將 edui-faked-video 改爲 edui-faked, 防止此處被替換爲 image 標籤
2. 將 image 改爲 video, 實現視頻實時預覽，修復保存導致視頻丟失

    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'));
                //TODO: 將 edui-faked-video 改爲 edui-faked，防止此處被替換爲image標籤;
                cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked');
                //TODO: 將 image 改爲 video, 實現視頻實時預覽，修復保存導致視頻丟失;
                html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video'));
            }
            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)
            }
        },

2.打開 ueditor.config.js 文件，搜索 whitList

1. 添加 _url,style,url 字段
2. 添加 source, embed, iframe 規則

,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'],
            // TODO: 添加 _url,style,url 字段
			img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src','_url', 'loadingclass', 'class', 'data-latex','style', 'url'],
			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'],
            // TODO: 添加 source, embed, iframe 規則
            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']  
		}

3.打開 dialogs/video/video.js文件，搜索 createPreviewVideo

1. 將 embed 換成 video 標籤

    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>';
        
        // TODO: 將 embed 換成 video 標籤
         $G("preview").innerHTML =  '<video' +
            ' src="' + conUrl + '"' +
            ' width="' + 420 + '"' +
            ' height="' + 280 + '"' +
            ' autoplay' +
            ' controls="controls">'+
            '</video>';
    }