百度Ueditor编辑器wordimage踩坑

背景

改造公司老项目后台编辑器，使用百度的Ueditor做替换。

发现问题

• 1、ue编辑器初始化后部分参数无法覆盖ueditor.config.js中的选项。
• 2、wordimage（word图片转存）始终是灰色，无法使用。

解决办法

• 1、将ueditor.config.js中的inputXssFilter设置为false
• 2、将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 不生效的问题还木有去查，懒得查了，毕竟改了源码后不影响使用。

还是希望开发者们在写过滤规则的时候，要考虑全局，是否会有一些特定的规则处理。

大橘为重嘛！！！

表情包如有侵权，请联系作者删除

转载于:https://juejin.im/post/5d00ab3e518825183b454cf7