1. 程式人生 > >百度編輯器上傳視頻以及視頻編輯器預覽bug解決

百度編輯器上傳視頻以及視頻編輯器預覽bug解決

pla pos style src screen 一個 廣泛 .net 內容

百度編輯器目前來講是運用比較廣泛的一個編輯器了,不僅開源還有中文的文檔,所以很受歡迎,不過裏面也有許多地方需要開發人員自己調試,其中一個比較常見的問題就是上傳視頻了,上傳視頻本身有一些小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的代碼模板,在這裏我們去掉

[html] view plain copy
  1. type="application/x-shockwave-flash" class="‘ + classname + ‘" pluginspage="http://www.macromedia.com/go/getflashplayer"‘ +‘
技術分享圖片

更改好後,刷新一下,我們再來看看插入視頻後進入源碼然後再回到編輯器預覽狀態下已經沒有問題了,可以正常預覽,紅框裏的代碼的src內容已經不會被過濾了:

技術分享圖片技術分享圖片

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

百度編輯器上傳視頻以及視頻編輯器預覽bug解決