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

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

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

 

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

第一步：创建SpringBoot项目

首先我使用的是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上传图片的配置。