修复百度编辑器插入视频的bug

Posted 大咸菜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了修复百度编辑器插入视频的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中的地址即可。






以上是关于修复百度编辑器插入视频的bug的主要内容,如果未能解决你的问题,请参考以下文章

百度编辑器UEditor不能插入视频的解决方法

百度编辑器上传视频以及视频编辑器预览bug解决

解决百度富文本编辑器 UEditor 插入视频后没有路径的问题

我用百度富文本插入网络视频,插入后不能播放,如何解决?

求一个jQuery文本编辑器???要能上传图片 视频 音频的。最好有中文文档。 当然要免费的。

乐视云视频 接口开发 结合百度编辑器