关于百度Ueditor的一个BUG

遭遇：百度UE是我目前所在的公司一直都有使用的产品，最近我个人在本机调试的时候发现上传图片发生了异常，但是在服务器上已经存储了该图片，只是UE一直提示上传错误，并且没有将上传成功的图片自动放到编辑内容中去。
如图：

排查了一些时间之后，发现原因出自下面这句代码：

1	result = body.innerText \|\| body.textContent \|\| "";

详细位置在 ueditor.all.js 第24523行 (源码中是在_src\plugins\simpleupload.js第103行)

当浏览器装有某些插件的时候，会导致这种方式可能获取的json字符串不是标准的json字符串,例如Json Viewer Awesome，会将页面输出是标准json的字符串进行渲染，会在页面中添加自己的代码。

例如一段标准json字符串（在没有装任何json插件的浏览器中）输出如下：

如下：
{
"state": "SUCCESS",
"url": "/static/uploads/ue/image/20180222/1519283606115669.jpg",
"title": "1519283606115669.jpg",
"original": "下载.jpg",
"type": ".jpg",
"size": 32920
}

但在装有Json Viewer Awesome插件时，输出如下：

如下：
Tree
Chart
JSON Input
{
"state": "SUCCESS",
"url": "/static/uploads/ue/image/20180222/1519283606115669.jpg",
"title": "1519283606115669.jpg",
"original": "下载.jpg",
"type": ".jpg",
"size": 32920
}

看到前三行结果就一目了然了

解决方法

截取json部分，考虑到其他插件也可能会导致相同的BUG，所以用正则表达式捕获。
1
2
3
4
//在第24523行(源码中是在_src\plugins\simpleupload.js第103行)下面，添加
var jsonMatchPattern = /\{(.+?)\}/;
var jsonMatch = result.replace(/[\r\n]/g,"").match(jsonMatchPattern);
result = jsonMatch[0];

或者到这里下载修改版源码，自己打包：
https://github.com/ibyeyoga/ueditor