春节无聊,就去弄一下富文本编辑器,然后百度了一番,很多说百度的UEditor不错,然后去官网照着文档弄一遍,是挺简单好用的。然后想把这玩意结合到自己的一个spring项目里面,果然还是在点上传图片的时候GG了,百度谷歌了一遍,现在只能做到前后台一起时上传图片可用,如果有jsp 的 UEditor跨域能上传图片的告诉小弟一声,这里就总结一下这几天遇到的各种问题。
PS:话说博客园这里的富文本编辑器好像还可以。。。。
简介
UEditor是百度开发的一个开源html富文本编辑器,界面的确是好看一点,文档方面还算齐全,虽然跨域上传这块留了个坑让我们发挥想象力ヾ( ̄▽ ̄),所以为了防止UEditor有坑,需要改动UEditor的源码,这里建议下载UEditor的源码放到自己项目里面,UEditor的源码挺简单的,只要跟踪Debug一下很容易可以看出问题。
这里演示的spring项目集成了spring security和Thymeleaf,构建用maven构建,UEditor的后台控制器改成spring mvc的controller,原本想用Servlet,找了很多资料,貌似没看到spring mvc项目可以集成源生Servlet,但是spring boot通过@ServletComponentScan可以注册Servlet,用spring boot集成UEditor最是方便,基本没坑,一路畅通,这一点我已经试过。下面主要说spring项目如何集成UEditor后台。
正文
UEditor的下载安装什么的就不说了,直接上图。
前端文件目录:
把UEditor后台的源码放到自己项目里:
添加UEditor后台的依赖:
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.10</version> </dependency> <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20160810</version> </dependency>
由于我们用spring mvc,所以UEditor的controller.jsp要改成Controller的形式,基本把UEditor的controller代码复制过来就是了。
1 @Controller 2 public class UEditorController { 3 @RequestMapping("/ued/config") 4 public void service(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException { 5 6 request.setCharacterEncoding("utf-8"); 7 response.setHeader("Content-Type" , "text/html"); 8 String rootPath = request.getSession() 9 .getServletContext().getRealPath("/"); 10 11 try { 12 String exec = new ActionEnter(request, rootPath).exec(); 13 PrintWriter writer = response.getWriter(); 14 writer.write(exec); 15 writer.flush(); 16 writer.close(); 17 } catch (IOException e) { 18 e.printStackTrace(); 19 } 20 } 21 22 }