百度Ueditor编辑器wordimage踩坑

 酷酷的超  html5  2020-07-15  216  发表评论

发现问题

  • 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
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
所有评论
加载评论 ...
发表评论