百度編輯器目前來講是運用比較廣泛的一個編輯器了，不僅開源還有中文的文件，所以很受歡迎，不過裡面也有許多地方需要開發人員自己除錯，其中一個比較常見的問題就是上傳視訊了，上傳視訊本身有一些小bug，這個基本最大的體現就是編輯器內無法預覽上傳的視訊問題。

我搜集了網上的解決方案，發現基本都一樣，大多數都是複製黏貼的答案，雖說一定程度解決了編輯器上傳不顯示的問題，但卻造成了新的bug，例如上傳視訊框無法關閉，還有隻要等切換原始碼模式再返回來又看不到預覽的視訊了等。

所以最後還是自己動手豐衣足食，最後終於找到了完美解決方案，在找問題的過程也發現其實百度編輯器雖然留下了bug，但這些bug完全是在預期內的，也就是給了你解決的途徑，只需要能理解他們的程式碼根據他們的思路來就可以改成你想要的樣子，關鍵還是理解他們的開發思路，想必這對專業的前端肯定是很簡單的，奈何我並不是專業的前端，所以還是花了點時間，下面來看解決方案和bug本身的問題。

先來看具體的bug情況：

在插入視訊裡放入地址後，正常顯示在插入視訊裡，這個時候是正常的

但插入後會顯示下圖，視訊沒有正常的預覽，這是因為設定插入編輯器裡的不是視訊的程式碼，而是image圖片的程式碼

這個時候如果進入原始碼看的話，會發現裡面是空的，根本什麼都沒有

在進入編輯器的預覽會發現之前的圖片都消失了

出現這種情況是由於編輯器沒有開放視訊插入的程式碼的白名單，所以會被過xss濾掉

解決方案：

首先在ueditor.config.js檔案裡增加xss過濾白名單：

在這裡的末尾加上下列在插入視訊中使用的程式碼：

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.all.js裡，如果引用的是uedior.min.js就需要在這裡找，找到以下程式碼:

改完這裡後會發現插入視訊地址後，雖然編輯器可以看到視訊了，但是插入視訊的視窗不能關閉了

之所以會出現這個問題是因為改動embed後，下面紅框的程式碼無法正常找到image標籤及其裡面的屬性導致的，這裡只要註釋紅框的內容就可以解決插入視訊框無法自動關閉的問題。

接著往下看，除開這個bug外，還有新的問題，下面我們來看看點選原始碼再回到編輯器預覽裡會發生什麼。

從上面的圖上可以看出，去原始碼裡已經視訊程式碼不會被過濾了，但是回到編輯器卻是一片空白，這是怎麼回事呢？

問題出在紅框裡的這段程式碼裡：type="application/x-shockwave-flash" class="edui-faked-video" pluginspage="http://www.macromedia.com/go/getflashplayer"

type規定了flash格式，我插入的是flash所以沒問題，pluginspage是提供使用者flash下載地址的（有些使用者沒有安裝flash外掛或者沒有及時更新），那麼問題是在class裡了，因為ediu-faked-video會告訴編輯器這不是一個視訊，因此會刪除embed裡的src的連結，因此回到編輯器預覽會出現白板。

網上其他的答案是把ediu-faked-video改成ediu-video，但我不建議，因為只能解決部分問題而已，還有其他的bug，例如如果上傳的視訊是mp4格式怎麼辦，另外改動的地方不止樣一處，還是有問題，因此我建議改動ueditor.all.js裡的下圖紅框部分：

這裡是判斷如果點選視訊上傳需要匯入的是embed程式碼的情況，之前是image，我們改成了embed，因此這裡switch得到的是embed的程式碼模板，在這裡我們去掉

type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +' 

更改好後，重新整理一下，我們再來看看插入視訊後進入原始碼然後再回到編輯器預覽狀態下已經沒有問題了，可以正常預覽，紅框裡的程式碼的src內容已經不會被過濾了：

另外上傳視訊也可以正常運作，如果是按照網上改edui-faked那種，這裡如果傳的是MP4等其他格式的就會出問題。