UEditor 富文本编辑器,在控制台报错
经过多方Google,百度,问题都没有得到解决,最后通过探索源码,自己去探索答案。由于我是个java后端开发,所以在解读前端代码的时候,有不准确的地方,还请帮忙指正。
刷新界面的时候,报错如下
后台配置项返回格式出错,上传功能将不能正常使用! ueditor.all.min.js:2373
源码探索
跟踪报错的源码:
function () {
function d(b) {
console && console.error(b)
}
var c = this;
setTimeout(function () {
try {
c.options.imageUrl && c.setOpt("serverUrl", c.options.imageUrl.replace(/^(.*[\/]).+([\.].+)$/, "$1controller$2"));
var b = c.getActionUrl("config"), a = p.isCrossDomainUrl(b);
c._serverConfigLoaded = !1;
b && UE.ajax.request(b, {
method: "GET", dataType: a ? "jsonp" : "", onsuccess: function (b) {
try {
var e = a ? b : eval("(" + b.responseText + ")");
p.extend(c.options, e);
c.fireEvent("serverConfigLoaded");
c._serverConfigLoaded = !0
} catch (l) {
d(c.getLang("loadconfigFormatError"))
}
},
onerror: function () {
d(c.getLang("loadconfigHttpError"))
}
})
} catch (e) {
d(c.getLang("loadconfigError"))
}
})
};
当初始化页面的时候,这里会通过ajax调用后端,加载UEditor的配置文件;由于这里使用的是jsp的代码,我这里调用后端的地址是
http://localhost:8089/ajax/libs/ueditor/1.4.3/jsp/controller.jsp?action=config
对于jsp还是php,这个在Ueditor的配置文件中都可以配置,修改对应(udietor.config.js)的下面的配置即可:
,serverUrl: URL + "jsp/controller.jsp"
这里发送请求之后,会把后端的返回的结果的,解析成json,通过调试,发现我这里的返回结果是:
<%@ page language="java" contentType="text/html; charset=UTF-8"
import="com.baidu.ueditor.ActionEnter"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");
String rootPath = application.getRealPath( "/" );
out.write( new ActionEnter( request, rootPath ).exec() );
%>
我没有写错,他返回的就是上面的结果,也就是说,jsp没有完成它应有的解析,它是被当作一个静态资源被加载的,看jsp内部的代码,它实际上做的就是在读取jsp内部的配置文件,那为啥不直接加载jsp内部的config文件呢?
于是将上面的controller的地址,直接改成jsp内部json的配置文件的地址。
serverUrl: URL + "jsp/config.json"
看效果,发现加载配置已经能够成功,点下富文本编辑器上附件按钮,发现弹出框上已经没有任何异常。
image.png
尝试上传图片,发现上传失败,查看控制台,尴尬了:
image.png
//请求地址:[http://localhost:8089/ajax/libs/ueditor/1.4.3/jsp/config.json?action=uploadfile&encode=utf-8](http://localhost:8089/ajax/libs/ueditor/1.4.3/jsp/config.json?action=uploadfile&encode=utf-8)
Failed to load resource: the server responded with a status of 405 ()
以此知道了那个jsp的另一个功能,上传文件的等action,作者使用的jsp+servlet技术相关功能。servlet对于我来将算是比较古老的技术,于是决定重写一下相关的功能代码,并对相关代码进行升级,把文件上传到oss上。
重构的后端代码,参照我的这篇简书
https://www.jianshu.com/p/379d0c664adf
网友评论