SpringBoot+Thymeleaf 整合 Ueditor 上傳圖片
阿新 • • 發佈：2018-12-24
此處使用了SpringBoot框架，配備了Thymeleaf模板引擎，所以沒有必要再新增jsp來相容UEditor，可通過修改原始碼滿足需要。下面是詳細教程。
1.新建SpringBoot專案，新增web和thymeleaf包
pom檔案如下:
-
<?xml version="1.0" encoding="UTF-8"?>
-
<project xmlns="http://maven.apache.org/POM/4.0.0"
-
xsi:schemaLocation=
"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-
<modelVersion>4.0.0
</modelVersion>
-
-
<groupId>com.example
</groupId>
-
<artifactId>ueditor-test
</artifactId>
-
<version>
-
<packaging>jar
</packaging>
-
-
<name>ueditor-test
</name>
-
<description>Demo project for Spring Boot
</description>
-
-
<parent>
-
<groupId>org.springframework.boot
</groupId>
-
<artifactId>spring-boot-starter-parent
</artifactId>
-
<version>1.5.2.RELEASE
</version>
-
-
<relativePath/>
<!-- lookup parent from repository -->
-
</parent>
-
-
<properties>
-
<project.build.sourceEncoding>UTF-8
</project.build.sourceEncoding>
-
<project.reporting.outputEncoding>UTF-8
</project.reporting.outputEncoding>
-
<java.version>1.8
</java.version>
-
<!--修改thymeleaf版本-->
-
<thymeleaf.version>3.0.3.RELEASE
</thymeleaf.version>
-
<thymeleaf-layout-dialect.version>2.1.0
</thymeleaf-layout-dialect.version>
-
</properties>
-
-
<dependencies>
-
<dependency>
-
<groupId>org.springframework.boot
</groupId>
-
<artifactId>spring-boot-starter-thymeleaf
</artifactId>
-
</dependency>
-
<dependency>
-
<groupId>org.springframework.boot
</groupId>
-
<artifactId>spring-boot-starter-web
</artifactId>
-
</dependency>
-
-
<dependency>
-
<groupId>org.springframework.boot
</groupId>
-
<artifactId>spring-boot-starter-test
</artifactId>
-
<scope>test
</scope>
-
</dependency>
-
</dependencies>
-
-
<build>
-
<plugins>
-
<plugin>
-
<groupId>org.springframework.boot
</groupId>
-
<artifactId>spring-boot-maven-plugin
</artifactId>
-
</plugin>
-
</plugins>
-
</build>
-
-
-
</project>
2.從官網下載原始碼並解壓至專案，注意config.json我拷到了resources根路徑下，如圖:
3.新增UEditorController，跳轉到index頁面:
-
package com.example;
-
-
import org.springframework.stereotype.Controller;
-
import org.springframework.web.bind.annotation.RequestMapping;
-
-
/**
-
* Created by ldb on 2017/4/9.
-
*/
-
@Controller
-
public
class UEditorController {
-
-
-
@RequestMapping(
"/")
-
private String showPage(){
-
return
"index";
-
}
-
-
-
}
4.執行專案。訪問路徑localhost:8080，跳轉到如下介面即是原始碼已拷貝成功
5.此時發現上傳圖片功能不能用。下面接著看。修改pom，新增UEditor依賴的Jar包。pom檔案如下:
-
<?xml version="1.0" encoding="UTF-8"?>
-
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-
xsi:schemaLocation=
"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-
<modelVersion>4.0.0
</modelVersion>
-
-
<groupId>com.example
</groupId>
-
<artifactId>ueditor
</artifactId>
-
<version>0.0.1-SNAPSHOT
</version>
-
<packaging>jar
</packaging>
-
-
<name>ueditor
</name>
-
<description>Demo project for Spring Boot
</description>
-
-
<parent>
-
<groupId>org.springframework.boot
</groupId>
-
<artifactId>spring-boot-starter-parent
</artifactId>
-
<version>1.5.2.RELEASE
</version>
-
<relativePath/>
<!-- lookup parent from repository -->
-
</parent>
-
-
<properties>
-
<project.build.sourceEncoding>UTF-8
</project.build.sourceEncoding>
-
<project.reporting.outputEncoding>UTF-8
</project.reporting.outputEncoding>
-
<java.version>1.8
</java.version>
-
<thymeleaf.version>3.0.3.RELEASE
</thymeleaf.version>
-
<thymeleaf-layout-dialect.version>2.1.0
</thymeleaf-layout-dialect.version>
-
</properties>
-
-
<dependencies>
-
<dependency>
-
<groupId>org.springframework.boot
</groupId>
-
<artifactId>spring-boot-starter-thymeleaf
</artifactId>
-
</dependency>
-
<dependency>
-
<groupId>org.springframework.boot
</groupId>
-
<artifactId>spring-boot-starter-web
</artifactId>
-
</dependency>
-
-
<dependency>
-
<groupId>org.springframework.boot
</groupId>
-
<artifactId>spring-boot-starter-test
</artifactId>
-
<scope>test
</scope>
-
</dependency>
-
-
<!--UEditor依賴的jar包 -->
-
<dependency>
-
<groupId>org.json
</groupId>
-
<artifactId>json
</artifactId>
-
</dependency>
-
<dependency>
-
<groupId>commons-fileupload
</groupId>
-
<artifactId>commons-fileupload
</artifactId>
-
<version>1.3.2
</version>
-
</dependency>
-
<dependency>
-
<groupId>commons-codec
</groupId>
-
<artifactId>commons-codec
</artifactId>
-
<version>1.9
</version>
-
</dependency>
-
</dependencies>
-
-
<build>
-
<plugins>
-
<plugin>
-
<groupId>org.springframework.boot
</groupId>
-
<artifactId>spring-boot-maven-plugin
</artifactId>
-
</plugin>
-
</plugins>
-
</build>
-
-
-
</project>
-
package com.example;
-
-
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;
-
-
/**
-
* Created by ldb on 2017/4/9.
-
*/
-
@Controller
-
public
class UEditorController {
-
-
-
@RequestMapping(
"/")
-
private String showPage(){
-
return
"index";
-
}
-
-
@RequestMapping(value=
"/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();
-
}
-
-
}
-
}
-
package com.baidu.ueditor;
-
-
import com.baidu.ueditor.define.ActionMap;
-
import org.json.JSONArray;
-
import org.json.JSONObject;
-
-
import java.io.*;
-
import java.net.URISyntaxException;
-
import java.util.HashMap;
-
import java.util.Map;
-
-
/**
-
* 配置管理器
-
* @author [email protected]
-
*
-
*/
-
public
final
class ConfigManager {
-
-
private
final String rootPath;
-
private
final String originalPath;
-
private
final String contextPath;
-
private
static
final String configFileName =
"config.json";
-
private String parentPath =
null;
-