1. 程式人生 > >百度編輯器UEditor源碼模式下過濾div/style等html標簽

百度編輯器UEditor源碼模式下過濾div/style等html標簽

規則 開頭 lte 標簽 定位 ads 兩種 適用於 tlist

UEditor在html代碼模式下,當輸入帶有<div style="">、<iframe>這類帶有html標簽的內容時,切換為編輯器模式後,會發現輸入的內容被刪除,自動過濾掉了。提供兩種解決方案:

1、“白名單法“,此即網上找的很多配置黑白名單,不過都適用於老版本;新版本的文件名做了很大改變,找不到那些方法中描述的原樣文件。但是,一套程序的原理總是不變的,通過幾天的研究、試了多種方法,發現,最新的版本(1.4.3)也有個所謂“白名單”,通過配置即可實現對默認的過濾規則做修改。

在配置文件 ueditor.config.js中,大約354行,有個註釋://默認過濾規則相關配置項 ,這裏幾行是基礎的開關。下面有個 xss過濾、insertHTML等操作相關的配置項,這裏就是操作重點,"xss過濾白名單"即UEditor中源碼模式下,不被過濾的標簽。

技術分享圖片

例如:我們修改 allowDivTransToP為false,在 whitList{}白名單中加入 div標簽,則清除瀏覽器緩存後,在源碼模式下編輯div標簽,增加樣式,切換到編輯器模式,就會生效;返回源碼模式,div標簽依然存在。

技術分享圖片

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

同理,插入視頻時,使<embed><iframe>標簽不被過濾掉,可在 ,whitList{}中分別增加相應標簽及屬性:

技術分享圖片

2、“簡單粗暴法”:在文件ueditor.all.js中,有個函數 UE.plugins[‘defaultfilter‘] = function(){......},上面註釋為,編輯器默認的過濾轉換機制。可在函數開頭直接添加 return 語句,使所有過濾機制都不生效。

技術分享圖片

同理,對ueditor.all.min.js做同樣處理:(可搜索 defaultfilter 定位)

技術分享圖片

這樣,UEditor自帶的所有過濾機制都無效,可在源碼模式下隨意使用html標簽。

百度編輯器UEditor源碼模式下過濾div/style等html標簽