百度UEditor编辑器视频相关bug汇总和稳定解决方案

百度UEditor编辑器的视频是个很头疼的问题，从昨晚到今天折腾了一天，也看了不少帖子，很多都是只治标不治本，而且有很多改法也是忽略本质，不过受大神启发，自己还是琢磨出来了。

百度UEditor编辑器的视频主要容易出现几个问题：

1、添加视频之后，点击查看html源码，结果丢失src后面的链接；

2、视屏编辑器预览BUG；

3、添加视屏后百度编辑器预览BUG；

这三个问题，本文将分别讲解：

一、丢失src后面的链接问题

这个问题其实网上有很多大神已经找到关键点了：白名单！没错，就是这个！

这个问题可以参考这个两个帖子：

http://blog.csdn.net/eunyeon/article/details/52964152

https://github.com/fex-team/ueditor/pull/2957/commits/d4b875ce165b3225929496c2d85848afbff0deeb?diff=split

其实就是在ueditor.config.js的白名单whitList:里面加上src字段，这样就不会被过滤了。

 

[html]   view plain  copy

1. <span style="font-size:18px;">img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'data-latex'], </span>  

[html]   view plain  copy

1. <span style="font-size:18px;">//视频部分白名单********  
2. video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],    
3. source: ['src', 'type'],    
4. embed:  ['type', 'class', 'pluginspage', 'id', 'src', 'width', 'height', 'align', 'bgcolor', 'style', 'wmode', 'play',    
5.     'loop', 'menu', 'allowscriptaccess', 'allowfullscreen'],  
6. iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']  
7. //********</span>  

img里面为什么要加上'_src'和'_url'，第一篇博客里面说是因为编辑器在切换源码的过程中过滤掉img的_url属性（用来存储视频url）_src/plugins/video.js里处理的是_url，而不是_src。

 

然而，问题来了，居然没有用！！！！

折腾了半天，最后发现只要把 whitList: 改成 whiteList:就好了。源码中少了一个e，一口血吐出来。想问百度UEditor的开发大神么英语六级过了么？

 

二、视屏编辑器预览BUG

关于视频编辑器的问题个人没找到有解释清楚的，折腾了半天还是自己看源码搞明白了，这里让我慢慢说。

视屏编辑器的bug在这里：

然而在确认之后，在UEditor的编译器上，把鼠标放在视频位置，弹出菜单，点击了下方的“修改”按钮

打开之后，奇迹出现了。。

晕死，怎么会这样。我找了半天，终于在视频编译器对应的video.js中找到问题了，就是这个方法：

 

[javascript]   view plain  copy

1. /** 
2.      * 监听url改变事件 
3.      * @param url 
4.      * @modify ie9以上使用oninput属性监听，onpropertychange不稳定 
5.      */  
6.     function addUrlChangeListener(url){  
7.         if (browser.ie) {  
8.             url.onpropertychange = function () {  
9.                     createPreviewVideo( this.value );  
10.         } else {  
11.             url.addEventListener( "input", function () {  
12.                 createPreviewVideo( this.value );