修复百度编辑器插入视频的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