本篇仅作为针对问题,提供的部分解决方案, 不是完整指导UEditor结合实际项目,如需要请看文末参考文章。
软件环境
- ueditor1_4_3_3-src(源码完整版)
- SpringMVC 4.3.2
- JDK 1.8
- Tomcat 8
- Shiro 1.3
- urlrewrite 3.2.0
- JSP 2.3.1
注 本项目未使用源码包里的Lib,全部由Maven依赖添加进来,UEditor后台代码使用源码,添加到项目中,因为我需要修改Config.json位置,所以把源码引入到项目,也是因为官方已经提醒,后台代码仅仅为Demo,推荐自行实现,现在引入进来,只是为了调试踩坑用。
目录结构
- UEditor前端代码: /src/main/webapp/static/ueditor
- UEditor配置文件: /src/main/resources/ueditor/config.json
- UEditor后台文件: /src/main/java/com/baidu/ueditor
一系列坑开始(列表),详细内容请看填坑操作
- UEDITOR_HOME_URL 和 serverUrl 没关系(重要,重要,重要)
- 开发测试时,serverUrl中要加上项目名(如有),没有则可以忽略
- 替代
JSP/controller.jsp
的Controller一定要返回text,而不是json。 - URLRewriter会在url地址中添加项目的一些字符串,会影响config请求。
- Shiro中配置static为无需认证,否则无法加载UEditor的静态资源。
- 自定义图片保存接口时,需要指定UEditor所需要的返回格式。
- 继续踩坑~~~~
填坑开始
UEDITOR_HOME_URL 是指定UEditor前端代码的位置,而serverUrl是服务器统一*请求接口路径,也就是Controller的地址(URI)。在Demo中写成
serverUrl: URL + "jsp/controller.jsp"
,只是因为Demo演示方便,你完全可以指定绝对路径,与UEDITOR_HOME_URL
分开来。
因为我使用Tomcat作为本地测试的服务器,默认会在URL地址中加上项目名,比如,
serverUrl: "/qy-XXXXX/ueditor/config"
,目前还没有发现更好的配置方法,先暂且直接写上来。这个是我犯的错误,从json名臆断返回response的时候也需要用json,其实UEditor前端解析时不是按json来接续,而是字符串。
jsp/controller.jsp
的代码也能看得出来。也就是返回时ContentType是text/plain;
而不是application/json;
的区别。
如果返回内容设置成Json,你拿到的请求其他服务时的地址会加上http://localhost/qy-topdesign/dfManager/function URL() { [native code]}/ueditor/config?action=config&&noCache=1511326561718
的样子。就是因为UEditor前端没能正常解析你从后台返回的配置文件内容。
/** * 输出text * @param response * @param text */ public static void renderText(HttpServletResponse response, final String text) { String encoding = "UTF-8"; String contentType = "text/plain;charset=" + encoding; try { response.setContentType(contentType); //setNoCache(response); //设置为不缓冲 response.getWriter().write(text); } catch (IOException e) { logger.error(e.getMessage(), e); } } /** * * @param response * @param jsonStr */ public static void renderJson(HttpServletResponse response, final String jsonStr) { try { response.reset(); //clear .. after setXXX response.setContentType("application/json;charset=UTF-8"); setNoCache(response); //设置为不缓冲 PrintWriter out = response.getWriter(); out.write(jsonStr); out.flush(); /* out.close();*/ } catch (IOException e) { logger.error(e.getMessage(), e); } }
- 这个稍微简单点,在获取config路径是,把路径中多添加的部分剔除掉即可。
在Spring的Shiro配置文件里,加上
/static/** = anon
,同时在urlrewriter.xml里加上如下代码:<!-- 增加后台管理的资源文件夹 --> <rule> <from>/static/**</from> <to>/static/$1</to> </rule>
UEditor有固定的图片保存返回信息格式,一定要遵守,否则会提示
文件已上传,但无法显示
,在自定义接口里,可以自由保存图片,但是需将可用的图片保存路径,返回给UEditor。
正确的代码:
/** * UEditor * 图片上传接口 * imageActionName配置的接口 */ @RequestMapping(value="/uploadimage") public void uploadUEditorImage(HttpServletRequest request, HttpServletResponse response) throws IOException{ // 保存图片 State saveState = new BaseState(true,"保存成功"); saveState.putInfo("original", "originalpath"); saveState.putInfo("size", 1024); saveState.putInfo("title", "testImage"); saveState.putInfo("type", "jpg"); saveState.putInfo("url", "/public/images/ZmlybSUyRjEtZXh0ZXJuYWwyX1ZpbGxhcy1XaW50ZXJiZXJnX1RoaXJkLVNraW4tQXJjaGl0ZWN0dXJlLTk2MHg2ODYuanBn"); // 返回保存图片处理结果 ResponseUtil.renderJson(response, saveState.toJSONString()); }
继续填坑~~~