项目为多模块方式。后台项目（ueditor.backend），在需要用到的项目引用即可，几乎无代码侵入。

摘要

  1. 前端文件，包括 config.json，统一放到 static/uEditor，可以无视该目录，只管引用即可，配置文件一旦配置好，也基本上不需要修改。线上线下，根据情况，可分别配置。
  2. 上传目录，建议配置到非 web 目录之下，因为上传的图片需要保留。如果配置到 web 目录，在项目更新时，可能会被不小心清理掉。
  3. 在点击撤销、重试两个功能按键时，会有 js 脚本错误，官方原版即是如此，尝试修复无果，不影响使用，可无视之。 
    1
    ueditor.all.min.js:8 The given range isn't in document.

上效果图

后台项目

关键依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20180130</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>
<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.11</version>
</dependency>
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-web</artifactId>
    <version>5.0.6.RELEASE</version>
    <scope>compile</scope>
</dependency>

关键配置项

ConfigManager.configFileName

1
private static final String configFileName = "static/uEditor/config.json";

前台项目

关键配置项

static/uEditor/config.json

1
2
basePath":"C:/temp",/* 上传文件的基本路径，需要与application.yml配置的【uEditor.upload.path】保持一致 */
"imagePathFormat": "/uEditorUploadImages/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

application.yml

1
2
3
uEditor.upload.path: C:/temp # 需要与 static/uEditor/config.json 的配置项【basePath】保持一致。
spring.mvc.static-path-pattern: /**
spring.resources.static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${uEditor.upload.path}

Controller
必须配置的路由是：@RequestMapping(“/uEditor/config”)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package ueditor.frontend.Controller;

import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@Controller
public class UEditorController {
    @RequestMapping("/uEditorDemo")
    public String uEditorDemo(){
        return "/uEditorDemo";
    }

    @RequestMapping("/uEditor/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");

        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

Demo 页

见 uEditorDemo.html 以及对应的 uEditorDemo.js
获取文本框录入的数据，请见 uEditorDemo.js 文件下的 getContent 方法：

1
2
3
4
5
6
7
8
9
function getContent() {
    // var arr = [];
    // arr.push("使用editor.getContent()方法可以获得编辑器的内容");
    // arr.push("内容为：");
    // arr.push(UE.getEditor('editor').getContent());
    // alert(arr.join("\n"));
    $("#divApiCallInfo").html("使用editor.getContent()方法可以获得编辑器的内容");
    $("#txtUEditorContent").val(UE.getEditor('editor').getContent())
}

源码

springBootIntegrationUEditor

关于 spring boot 配置静态资源

spring boot 配置静态资源