春节无聊,就去弄一下富文本编辑器,然后百度了一番,很多说百度的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的下载安装什么的就不说了,直接上图。

  前端文件目录:

  spring和UEditor结合

  把UEditor后台的源码放到自己项目里:

  spring和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 }
Controller

相关文章:

  • 2021-10-17
  • 2022-12-23
  • 2022-12-23
  • 2021-05-27
  • 2022-01-22
  • 2021-05-10
  • 2021-07-21
猜你喜欢
  • 2022-12-23
  • 2021-05-07
  • 2021-12-19
  • 2022-12-23
  • 2022-12-23
  • 2022-01-15
  • 2021-05-03
相关资源
相似解决方案