背景

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

發(fā)現(xiàn)問題

• 1、ue編輯器初始化后部分參數(shù)無法覆蓋ueditor.config.js中的選項。
• 2、wordimage（word圖片轉(zhuǎn)存）始終是灰色，無法使用。

解決辦法

• 1、將ueditor.config.js中的inputXssFilter設(shè)置為false
• 2、將ueditor.all.js源碼中添加input過濾規(guī)則的地方添加上下面的代碼：

if (whitList && config.inputXssFilter) { ...if (node.type !== 'element') {return false;}// 添加內(nèi)容開始if (node.tagName === 'img' && node.attrs.word_img) {return false;}// 添加內(nèi)容結(jié)束filter(node); ... } 復(fù)制代碼

推薦使用第二種方法解決

尋蹤

• 首先打開ueditor.all.js搜索“wordimage”找到 本地圖片引導(dǎo)上傳

UE.plugin.register('wordimage',function(){ ... 復(fù)制代碼

在 inputRule 方法中使用 debugger 打斷點調(diào)試，發(fā)現(xiàn)在這里img的attrs變了

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

發(fā)現(xiàn)如果是element元素就進行filter過濾，意識到了我可以通過關(guān)閉inputXssFilter來關(guān)閉這個過濾。

但是這個輸入的Xss過濾我感覺還是不要去掉的好。 所以就依據(jù)word_img的這個attr屬性添加了對應(yīng)的判斷。

使之可以跳過這個filter。

---

結(jié)語

至此就解決了ueditor的wordimage圖片轉(zhuǎn)存不生效的問題了。

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

還是希望開發(fā)者們在寫過濾規(guī)則的時候，要考慮全局，是否會有一些特定的規(guī)則處理。

大橘為重嘛！！！

表情包如有侵權(quán)，請聯(lián)系作者刪除

轉(zhuǎn)載于:https://juejin.im/post/5d00ab3e518825183b454cf7

總結(jié)

以上是生活随笔為你收集整理的百度Ueditor编辑器wordimage踩坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。