SpringBoot中使用UEditor基本配置(图文详解)

2018年03月12日 10:52:32 BigPotR 阅读数：4497  

    最近因工作需要，在自己研究百度的富文本编辑器UEditor，这个过程中也遇到很多问题，这里写一下我的心得和总结，希望帮到需要帮助的人。正文如下：

第一步：创建SpringBoot项目

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

    首先我使用的是IDEA 2017(不得不说IDEA创建Spring项目确实要方便一些)，新建一个SpringBoot项目:

    最上角 File -> New -> Project -> Spring Initializr 

    

    直接下一步

    

    这些根据需要自行配置即可(这里我使用的是默认配置)。

    

    这里我选择的是SpringBoot 1.5.10版本，勾选上Web，然后下一步选择项目保存的目录，这样就创建好了。

    创建好的目录结构如下:

    

第二步：下载UEditor

    下载地址：http://ueditor.baidu.com/website/download.html

            

    解压后的文件结构如下：

  

    将除jsp文件夹以外的文件都放入项目src/main/resources/static目录下

    

    在项目根目录下创建一个lib文件夹，用于导入UEditor的jar包

    

    将UEdito解压目录下的jsp/lib文件夹中的jar考入lib目录中，然后将jar包加入项目中

    最上角 File -> Project Structrue -> Libraries 

    

完成之后启动Application，访问localhost:8080，效果如下

到这里UEditor的导入就完成了。

第三步：UEditor的基本配置

    虽然现在有了初步的效果，但是还是不能上传图片，现在进行后端配置

    之前的jsp文件夹下面除了jar包外还有两个文件，一个是controller.jsp和config.json，controller.jsp其实就是为了获取config.js中的配置，所以为了方便管理以及规范，我们新建一个UEditorController将controller.jsp的内容拷贝进去，然后将config.json放到resources/static目录下，然后将Application文件移到controller的同级目录下,不然会扫描不到controller

    

    UEditorController.java内容如下

1.   package com.example.controller;
2.   import com.baidu.ueditor.ActionEnter;
3.   import org.json.JSONException;
4.   import org.springframework.beans.factory.annotation.Autowired;
5.   import org.springframework.web.bind.annotation.RequestMapping;
6.   import org.springframework.web.bind.annotation.RestController;
7.   import javax.servlet.http.HttpServletRequest;
8.   import javax.servlet.http.HttpServletResponse;
9.   import java.io.IOException;
10.   import java.io.PrintWriter;
11.    
12.   @RestController
13.   public class UEditroController {
14.   @Autowired
15.   private HttpServletRequest request;
16.   @RequestMapping("/ueditorConfig")
17.   public void getUEditorConfig(HttpServletResponse response){
18.   String rootPath = "src/main/resources/static";
19.   try {
20.   String exec = new ActionEnter(request, rootPath).exec();
21.   PrintWriter writer = response.getWriter();
22.   writer.write(exec);
23.   writer.flush();
24.   writer.close();
25.   } catch (IOException | JSONException e) {
26.   e.printStackTrace();
27.   }
28.   }
29.   }

    因为controller.jsp中的

        String rootPath = application.getRealPath( "/" )

    没能获取到正确的路径，所以这里我手动更改了路径，这个路径就是config.json的位置

    然后修改resource/static目录下的ueditor.config.js文件

    33行左右的serverUrl的路径改为之前UEditorController的访问路径,我这里的路径是"/ueditorConfig"，serverUrl就是服务器统一请求接口路径

    

 

    以上都更改完之后运行Application访问http://localhost:8080/ueditorConfig?action=config

    如果出现类似以下内容则表示读取配置成功

    

    该内容即是config.json中的内容

    SpringBoot中使用UEditor的基本配置到这里就完成了，但是还是不能上传图片，之后会讲解一下UEditor上传图片的配置。

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄