1. 下载UEditor(https://ueditor.baidu.com/website/download.html)1.4.3.3 Jsp 版本 UTF-8版

idea新建项目选项中没有spring initializr idea中没有spring config_配置文件

2、把ueditor放到项目中

idea新建项目选项中没有spring initializr idea中没有spring config_json_02

3、建立html页面、页面引用ueditor

idea新建项目选项中没有spring initializr idea中没有spring config_上传_03

4、并在页面中初始化ueditor

<div>
      <script id="container" name="cpro"  type="text/plain"></script>
 </div>

$(function() {
    UE.delEditor("container");
    var ue = UE.getEditor("container");
    ue.ready(function() {

    });
    UE.delEditor("container-e");
    var ue2 = UE.getEditor("container-e");
});

6、maven中引用ueditor相关jar包,其中上传支持需要五个包,我们只需要引用其中一个包即可,其它的包在springboot中已经引入。

idea新建项目选项中没有spring initializr idea中没有spring config_配置文件_04

maven中找到下列资源,要找好版本。

<!-- https://mvnrepository.com/artifact/com.gitee.qdbp.thirdparty/ueditor -->
        <dependency>
            <groupId>com.gitee.qdbp.thirdparty</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.4.3.3</version>
        </dependency>

7、建立自己的Controller,通过Controller访问当前页面,出现如下界面,说明ueditor引入成功,但此时会发现上传图片按钮不可用

idea新建项目选项中没有spring initializr idea中没有spring config_配置文件_05

8、为什么会出现这种问题呢?看ueditor的目录结构就知道了:

当我们打开路径请求页面时会发现一个请求,可以判断UEditor向后台的请求要经过controller.jsp,这个请求地址是在ueditor.config.js中配置的,官方文档中也有说明

idea新建项目选项中没有spring initializr idea中没有spring config_配置文件_06

在jsp文件夹下面除了jar包外还有两个文件,一个是controller.jsp和config.json,controller.jsp其实就是为了获取config.js中的配置

idea新建项目选项中没有spring initializr idea中没有spring config_json_07

通过分析我们知道了,spring boot中不能直接将请求发送到这个controller.jsp(请求地址变成了一个下载链接),我们应该新建一个控制器UEditorController将controller.jsp的内容拷贝进去,并修改rootPath指向到json文件夹所在的位置。

public class UEditorController {
    @RequestMapping(value="/ueditorConfig")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath =ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static/ueditor/jsp";
        //String rootPath=request.getServletContext().getRealPath("static/ueditor/jsp");
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

}

看看这个rootPath,查阅官方文档和相关资料,原来所有请求经过controller.jsp时都要先加载配置文件config.json,而这个rootPath就是配置文件所在的目录。out.write()就是输出(返回)这个json格式的配置信息。

同时我们需要去修改ueditor.config.js中配置的服务器统一请求接口路径serverUrl的值来指向这个方法。具体修改如下:

 

idea新建项目选项中没有spring initializr idea中没有spring config_配置文件_08

注:原来的时候访问需要调用的是URL中的地址,此时路径上会带一个ueditor,我们一定要新建一个server_url来替换掉原来的URL,而其中的"/ueditorConfig"则是指向到自己建UEditorController,这样就可以正常加载config.json文件

9、点击图片上传:发现图片可以上传,但是没有正确显示

idea新建项目选项中没有spring initializr idea中没有spring config_上传_09

原因是我们没有配置config.json中的imageUrlPrefix路径访问路径引起的,改成配置如下:

idea新建项目选项中没有spring initializr idea中没有spring config_配置文件_10

再试,一切正常

idea新建项目选项中没有spring initializr idea中没有spring config_配置文件_11