百度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 不生效的问题还木有去查，懒得查了，毕竟改了源码后不影响使用。

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

大橘为重嘛！！！

表情包若有侵权，请联系做者删除