修復百度編輯器插入視頻的bug

修復百度編輯器插入視頻的bug，可實時預覽視頻，可修改到支持手機查看視頻

開程序員的淘寶店！尋找開源技術服務夥伴！>>>   

站在前人的肩膀上咱們就能夠站的更高，看得更遠。

因此，請在 ueditor.config.js中搜索 whitlist , 在後面加入

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分別能支持embed標籤和iframe標籤，詳見 另外一篇博客。

而後修改ueditor.all.js 中的 me.commands["insertvideo"] 方法（搜索一下便可），將如下兩行代碼

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

改成

//此處將 edui-faked-video 改成 edui-faked，防止後面將此處替換爲image標籤
cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked');
// 此處將image改成embed實現實時預覽視頻，且修復了第一次插入視頻保存後，刷新後再保存會致使視頻丟失的bug
html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'embed'));

OK了，如今視頻能夠插入且能夠實時預覽，只剩下一個問題，誰告訴我怎麼在插入視頻後把那個視頻框關掉...

*******************************華麗分割線*********************************

好，接下來解決視頻沒法在手機上顯示的問題---嗚嗚嗚~~~（此處應有哭聲，掩面而泣啊，這破事兒弄了我一天）

首先要說的是，視頻網站那邊提供的 iframe 的代碼才能支持在手機上查看，然而，ueditor預覽使用的是embed，最終顯示是用iframe。視頻輸入的地方只能輸入一個網址，可是ueditor在video.js中對各大視頻網站的一些網址作了轉換，我輸入了騰訊提供的iframe中的src中的網址，被video.js中convert_url方法轉換成了另一個地址，因而最終顯示就顯示不出來了。本着不能讓非開發人員接觸代碼的精神（哪裏來的？直接用百度編輯器的source把src替換掉也能夠），我改了video.js中的代碼，把預覽的 embed 換成了iframe，把convert_url的功能屏蔽便可。

url: convert_url(url),

改成

url: url,

而後

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

改成

$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
'<iframe class="previewVideo" frameborder="0"' +
    ' src="' + url + '"' +
    ' width="' + 420  + '"' +
    ' height="' + 280  + '"' +
    ' allowfullscreen>' +
'</iframe>';

就能夠了。

之後只要輸入視頻網站提供的 iframe代碼中的src中的地址便可。

來源： https://my.oschina.net/jigc/blog/822945

null