百度Ueditor編輯器wordimage踩坑

背景

改造公司老項目後臺編輯器，使用百度的Ueditor作替換。

發現問題

• 一、ue編輯器初始化後部分參數沒法覆蓋ueditor.config.js中的選項。
• 二、wordimage（word圖片轉存）始終是灰色，沒法使用。

解決辦法

• 一、將ueditor.config.js中的inputXssFilter設置爲false
• 二、將ueditor.all.js源碼中添加input過濾規則的地方添加上下面的代碼：

if (whitList && config.inputXssFilter) {
...
   if (node.type !== 'element') {
   	return false;
   }
   // 添加內容開始
   if (node.tagName === 'img' && node.attrs.word_img) {
   	return false;
   }
   // 添加內容結束
   filter(node);
...
}
複製代碼

推薦使用第二種方法解決

尋蹤

• 首先打開ueditor.all.js搜索「wordimage」找到 本地圖片引導上傳

UE.plugin.register('wordimage',function(){
...
複製代碼

在 inputRule 方法中使用 debugger 打斷點調試，發如今這裏img的attrs變了

緊接着搜索"!== 'element'"很快就找到了：

發現若是是element元素就進行filter過濾，意識到了我能夠經過關閉inputXssFilter來關閉這個過濾。

可是這個輸入的Xss過濾我感受仍是不要去掉的好。 因此就依據word_img的這個attr屬性添加了對應的判斷。

使之能夠跳過這個filter。

---

結語

至此就解決了ueditor的wordimage圖片轉存不生效的問題了。

至於在實例化UE的時候，傳入 inputXssFilter: false 不生效的問題還木有去查，懶得查了，畢竟改了源碼後不影響使用。

仍是但願開發者們在寫過濾規則的時候，要考慮全局，是否會有一些特定的規則處理。

大橘爲重嘛！！！

表情包若有侵權，請聯繫做者刪除