很詳細的SpringBoot整合UEditor教程
UEditor只提供JSP版本的後端入口代碼。但提供了項目源碼,所以能夠根據業務需求修改源代碼。php
此處使用了SpringBoot框架,配備了Thymeleaf模板引擎,因此沒有必要再添加jsp來兼容UEditor,可經過修改源碼知足須要。下面是詳細教程。html
1.新建SpringBoot項目,添加web和thymeleaf包前端
pom文件以下:vue
-
-
<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-test</artifactId>
-
<version>0.0.1-SNAPSHOT</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根路徑下,如圖:java
3.添加UEditorController,跳轉到index頁面:python
-
package com.example;
-
-
import org.springframework.stereotype.Controller;
-
import org.springframework.web.bind.annotation.RequestMapping;
-
-
/**
-
* Created by ldb on 2017/4/9.
-
*/
-
-
public class UEditorController {
-
-
-
-
private String showPage(){
-
return "index";
-
}
-
-
-
}
4.運行項目。訪問路徑localhost:8080,跳轉到以下界面便是源碼已拷貝成功mysql
5.此時發現上傳圖片功能不能用。下面接着看。修改pom,添加UEditor依賴的Jar包。pom文件以下: jquery
-
-
<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.
-
*/
-
-
public class UEditorController {
-
-
-
-
private String showPage(){
-
return "index";
-
}
-
-
-
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 hancong03@baidu.com
-
*
-
*/
-
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;
-
private JSONObject jsonConfig = null;
-
// 塗鴉上傳filename定義
-
private final static String SCRAWL_FILE_NAME = "scrawl";
-
// 遠程圖片抓取filename定義
-
private final static String REMOTE_FILE_NAME = "remote";
-
-
/*
-
* 經過一個給定的路徑構建一個配置管理器, 該管理器要求地址路徑所在目錄下必須存在config.properties文件
-
*/
-
private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {
-
-
rootPath = rootPath.replace( "\\", "/" );
-
-
this.rootPath = rootPath;
-
this.contextPath = contextPath;
-
-
if ( contextPath.length() > 0 ) {
-
this.originalPath = this.rootPath + uri.substring( contextPath.length() );
-
} else {
-
this.originalPath = this.rootPath + uri;
-
}
-
-
this.initEnv();
-
-
}
-
-
/**
-
* 配置管理器構造工廠
-
* @param rootPath 服務器根路徑
-
* @param contextPath 服務器所在項目路徑
-
* @param uri 當前訪問的uri
-
* @return 配置管理器實例或者null
-
*/
-
public static ConfigManager getInstance ( String rootPath, String contextPath, String uri ) {
-
-
try {
-
return new ConfigManager(rootPath, contextPath, uri);
-
} catch ( Exception e ) {
-
return null;
-
}
-
-
}
-
-
// 驗證配置文件加載是否正確
-
public boolean valid () {
-
return this.jsonConfig != null;
-
}
-
-
public JSONObject getAllConfig () {
-
-
return this.jsonConfig;
-
-
}
-
-
public Map<String, Object> getConfig ( int type ) {
-
-
Map<String, Object> conf = new HashMap<String, Object>();
-
String savePath = null;
-
-
switch ( type ) {
-
-
case ActionMap.UPLOAD_FILE:
-
conf.put( "isBase64", "false" );
-
conf.put( "maxSize", this.jsonConfig.getLong( "fileMaxSize" ) );
-
conf.put( "allowFiles", this.getArray( "fileAllowFiles" ) );
-
conf.put( "fieldName", this.jsonConfig.getString( "fileFieldName" ) );
-
savePath = this.jsonConfig.getString( "filePathFormat" );
-
break;
-
-
case ActionMap.UPLOAD_IMAGE:
-
conf.put( "isBase64", "false" );
-
conf.put( "maxSize", this.jsonConfig.getLong( "imageMaxSize" ) );
-
conf.put( "allowFiles", this.getArray( "imageAllowFiles" ) );
-
conf.put( "fieldName", this.jsonConfig.getString( "imageFieldName" ) );
-
savePath = this.jsonConfig.getString( "imagePathFormat" );
-
break;
-
-
case ActionMap.UPLOAD_VIDEO:
-
conf.put( "maxSize", this.jsonConfig.getLong( "videoMaxSize" ) );
-
conf.put( "allowFiles", this.getArray( "videoAllowFiles" ) );
-
conf.put( "fieldName", this.jsonConfig.getString( "videoFieldName" ) );
-
savePath = this.jsonConfig.getString( "videoPathFormat" );
-
break;
-
-
case ActionMap.UPLOAD_SCRAWL:
-
conf.put( "filename", ConfigManager.SCRAWL_FILE_NAME );
-
conf.put( "maxSize", this.jsonConfig.getLong( "scrawlMaxSize" ) );
-
conf.put( "fieldName", this.jsonConfig.getString( "scrawlFieldName" ) );
-
conf.put( "isBase64", "true" );
-
savePath = this.jsonConfig.getString( "scrawlPathFormat" );
-
break;
-
-
case ActionMap.CATCH_IMAGE:
-
conf.put( "filename", ConfigManager.REMOTE_FILE_NAME );
-
conf.put( "filter", this.getArray( "catcherLocalDomain" ) );
-
conf.put( "maxSize", this.jsonConfig.getLong( "catcherMaxSize" ) );
-
conf.put( "allowFiles", this.getArray( "catcherAllowFiles" ) );
-
conf.put( "fieldName", this.jsonConfig.getString( "catcherFieldName" ) + "[]" );
-
savePath = this.jsonConfig.getString( "catcherPathFormat" );
-
break;
-
-
case ActionMap.LIST_IMAGE:
-
conf.put( "allowFiles", this.getArray( "imageManagerAllowFiles" ) );
-
conf.put( "dir", this.jsonConfig.getString( "imageManagerListPath" ) );
-
conf.put( "count", this.jsonConfig.getInt( "imageManagerListSize" ) );
-
break;
-
-
case ActionMap.LIST_FILE:
-
conf.put( "allowFiles", this.getArray( "fileManagerAllowFiles" ) );
-
conf.put( "dir", this.jsonConfig.getString( "fileManagerListPath" ) );
-
conf.put( "count", this.jsonConfig.getInt( "fileManagerListSize" ) );
-
break;
-
-
}
-
-
conf.put( "savePath", savePath );
-
conf.put( "rootPath", this.rootPath );
-
-
return conf;
-
-
}
-
-
private void initEnv () throws FileNotFoundException, IOException {
-
-
File file = new File( this.originalPath );
-
-
if ( !file.isAbsolute() ) {
-
file = new File( file.getAbsolutePath() );
-
}
-
-
this.parentPath = file.getParent();
-
-
String configContent = this.readFile( this.getConfigPath() );
-
-
try{
-
JSONObject jsonConfig = new JSONObject( configContent );
-
this.jsonConfig = jsonConfig;
-
} catch ( Exception e ) {
-
this.jsonConfig = null;
-
}
-
-
}
-
-
-
private String getConfigPath () {
-
//return this.parentPath + File.separator + ConfigManager.configFileName;
-
try {
-
//獲取classpath下的config.json路徑
-
return this.getClass().getClassLoader().getResource("config.json").toURI().getPath();
-
} catch (URISyntaxException e) {
-
return null;
-
}
-
}
-
-
private String[] getArray ( String key ) {
-
-
JSONArray jsonArray = this.jsonConfig.getJSONArray( key );
-
String[] result = new String[ jsonArray.length() ];
-
-
for ( int i = 0, len = jsonArray.length(); i < len; i++ ) {
-
result[i] = jsonArray.getString( i );
-
}
-
-
return result;
-
-
}
-
-
private String readFile ( String path ) throws IOException {
-
-
StringBuilder builder = new StringBuilder();
-
-
try {
-
-
InputStreamReader reader = new InputStreamReader( new FileInputStream( path ), "UTF-8" );
-
BufferedReader bfReader = new BufferedReader( reader );
-
-
String tmpContent = null;
-
-
while ( ( tmpContent = bfReader.readLine() ) != null ) {
-
builder.append( tmpContent );
-
}
-
-
bfReader.close();
-
-
} catch ( UnsupportedEncodingException e ) {
-
// 忽略
-
}
-
-
return this.filter( builder.toString() );
-
-
}
-
-
// 過濾輸入字符串, 剔除多行註釋以及替換掉反斜槓
-
private String filter ( String input ) {
-
-
return input.replaceAll( "/\\*[\\s\\S]*?\\*/", "" );
-
-
}
-
-
}
此處須要先轉爲URI再getPath(),不然若是你的項目路徑帶空格或者帶中文則沒法讀取到文件
8.運行項目路徑http://localhost:8080/config?action=config,以下圖顯示則表示可讀取到config.json文件linux
9.此時點擊上傳圖片顯示 以下android
提示未找到上傳數據。繼續一步步debug,發如今BinaryUploader類居然沒法獲取到字節流
google獲得緣由是由於SpringMVC框架對含字節流的request進行了處理,此處傳的是處理過的request,故獲取不到字節流。此時採用SpringMVC框架的解析器multipartResolver。修改源碼以下:
-
package com.baidu.ueditor.upload;
-
-
import com.baidu.ueditor.PathFormat;
-
import com.baidu.ueditor.define.AppInfo;
-
import com.baidu.ueditor.define.BaseState;
-
import com.baidu.ueditor.define.FileType;
-
import com.baidu.ueditor.define.State;
-
import org.apache.commons.fileupload.servlet.ServletFileUpload;
-
import org.springframework.web.multipart.MultipartFile;
-
import org.springframework.web.multipart.MultipartHttpServletRequest;
-
-
import javax.servlet.http.HttpServletRequest;
-
import java.io.IOException;
-
import java.io.InputStream;
-
import java.util.Arrays;
-
import java.util.List;
-
import java.util.Map;
-
-
public class BinaryUploader {
-
-
public static final State save(HttpServletRequest request,
-
Map<String, Object> conf) {
-
// FileItemStream fileStream = null;
-
// boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;
-
-
if (!ServletFileUpload.isMultipartContent(request)) {
-
return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
-
}
-
-
// ServletFileUpload upload = new ServletFileUpload(
-
// new DiskFileItemFactory());
-
//
-
// if ( isAjaxUpload ) {
-
// upload.setHeaderEncoding( "UTF-8" );
-
// }
-
-
try {
-
// FileItemIterator iterator = upload.getItemIterator(request);
-
//
-
// while (iterator.hasNext()) {
-
// fileStream = iterator.next();
-
//
-
// if (!fileStream.isFormField())
-
// break;
-
// fileStream = null;
-
// }
-
//
-
// if (fileStream == null) {
-
// return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
-
// }
-
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
-
MultipartFile multipartFile = multipartRequest.getFile(conf.get( "fieldName").toString());
-
if(multipartFile==null){
-
return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
-
}
-
-
String savePath = (String) conf.get( "savePath");
-
//String originFileName = fileStream.getName();
-
String originFileName = multipartFile.getOriginalFilename();
-
String suffix = FileType.getSuffixByFilename(originFileName);
-
-
originFileName = originFileName.substring( 0,
-
originFileName.length() - suffix.length());
-
savePath = savePath + suffix;
-
-
long maxSize = ((Long) conf.get("maxSize")).longValue();
-
-
if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
-
return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
-
}
-
-
savePath = PathFormat.parse(savePath, originFileName);
-
-
String physicalPath = (String) conf.get( "rootPath") + savePath;
-
-
//InputStream is = fileStream.openStream();
-
InputStream is = multipartFile.getInputStream();
-
State storageState = StorageManager.saveFileByInputStream(is,
-
physicalPath, maxSize);
-
is.close();
-
-
if (storageState.isSuccess()) {
-
storageState.putInfo( "url", PathFormat.format(savePath));
-
storageState.putInfo( "type", suffix);
-
storageState.putInfo( "original", originFileName + suffix);
-
}
-
-
return storageState;
-
// } catch (FileUploadException e) {
-
// return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);
-
} catch (IOException e) {
-
}
-
return new BaseState(false, AppInfo.IO_ERROR);
-
}
-
-
private static boolean validType(String type, String[] allowTypes) {
-
List<String> list = Arrays.asList(allowTypes);
-
-
return list.contains(type);
-
}
-
}
此時進行上傳圖片,已經可以成功上傳了。
10.但是圖片究竟上傳到哪裏了呢?繼續一步步debug發現,上傳到如圖路徑
如圖路徑爲tomcat緩存路徑,只要重啓下tomcat該文件就會被刪除。咱們須要將其存儲到磁盤中。此時修改config.json文件。
紅色箭頭爲修改處。我須要將文件存儲到E:/image/**下,此處我多添加了basePath,是想把視頻、音樂等靜態資源都存儲到E盤。因爲添加了basePath,須要修改配置。經過debug來到ConfigManage
添加紅色箭頭代碼,將basePath塞進配置文件裏。以後繼續來到上傳文件類BinaryUploader,修改以下代碼:
運行項目,點擊添加圖片。打開E盤的image目錄,如圖,成功上傳到E盤對應路徑
11.打開瀏覽器,發現頁面沒法加載圖片。以下圖:
打開瀏覽器調試器。如圖
沒法獲取到圖片。這是固然的,由於咱們把圖片存在E盤了,而spring並無對E盤目錄進行映射。此時咱們加入路徑映射。打開application.properties文件,添加以下代碼
web.upload-path=E:/
spring.mvc.static-path-pattern=/** spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${web.upload-path}
此時從新運行項目,點擊上傳圖片,圖片已經可以正常顯示了。
12.至此,SpringBoot整合UEditor應該完了吧。別急,SpringBoot主張打包成Jar包運行,咱們用Maven來打包運行試試
java -jar
打開項目地址,點擊上傳圖片,發現居然上傳不了了??!!
這是怎麼回事呢?爲何打成Jar包後就沒法上傳圖片了呢。通過不斷的debug和google。。發現了在Jar包裏沒法以ClassLoader.getResource().getPath()得到的路徑讀取文件,得用Class類的getResourceAsStream()來讀取。具體博文以下:
http://hxraid.iteye.com/blog/483115?page=3#comments
13.那麼咱們就來修改源碼,改爲getResourceAsStream讀取config.json文件吧。打開ConfigManager類,修改initEnv方法
-
private void initEnv () throws FileNotFoundException, IOException {
-
-
File file = new File( this.originalPath );
-
-
if ( !file.isAbsolute() ) {
-
file = new File( file.getAbsolutePath() );
-
}
-
-
this.parentPath = file.getParent();
-
-
//String configContent = this.readFile( this.getConfigPath() );
-
String configContent = this.filter(IOUtils.toString(this.getClass().getClassLoader().getResourceAsStream("config.json")));
-
-
try{
-
JSONObject jsonConfig = new JSONObject( configContent );
-
this.jsonConfig = jsonConfig;
-
} catch ( Exception e ) {
-
this.jsonConfig = null;
-
}
-
-
}
14. ok了,再次打包,運行項目
成功了!!!
項目源碼:https://github.com/llldddbbb/ueditor-test
本次教程到此結束。謝謝你們
File file = new File( this.originalPath );