1，ueditor官網下載：https://ueditor.baidu.com/website/download.html 下載相應的工具包和源碼，ps:源碼放到工程中javascript
2，解壓放到放到項目中，springboot工程建立再也不描述過程，resources：下放config.json文件；resources/static/ueditor 放ueditor其餘相關內容css
3，整理pom.xml文件html
<!--thymeleaf 模板 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- thymeleaf網頁解析 -->
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
</dependency>
<!-- 引入ueditor 須要的工具包 -->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20180130</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
</dependency>
4，添加UEditorController，跳轉到 index頁面java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.baidu.ueditor.ActionEnter;
import com.taogou.controller.base.BaseController;
/**
* 百度編輯富文本
*
* @author Administrator
*
*/
@Controller
public class UEditorController extends BaseController {
private String prefix = "/ueditor";
@RequestMapping("/")
private String showPage() {
return prefix + "/index";
}
@RequestMapping(value = "/config")
public void config(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json;charset=utf-8");
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();
}
}
}
index 頁面：修改靜態資源路徑，其餘保持一致web
<!DOCTYPE>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" th:src="@{/static/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/static/ueditor/ueditor.all.min.js}"> </script>
<!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
<!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
<script type="text/javascript" charset="utf-8" th:src="@{/static/ueditor/lang/zh-cn/zh-cn.js}"></script>
<style type="text/css">
div{
width:100%;
}
</style>
</head>
<body>
網頁輸入：http://localhost:8081/ 查看效果spring
5，上傳圖片部分整合 ：controller 裏面的 /config 放到 ueditor.config.js 中json
window.UEDITOR_CONFIG = {
//爲編輯器實例添加一個路徑，這個不能被註釋
UEDITOR_HOME_URL: URL
// 服務器統一請求接口路徑
, serverUrl: "/config"
//, serverUrl: URL + "/config"
//工具欄上的全部的功能按鈕和下拉框，能夠在new編輯器的實例時選擇本身須要的從新定義
, toolbars: [[
此時會發現沒法加載 config.json文件，修改源碼ConfigManage 下的getConfigPath()方法springboot
private String getConfigPath() {
// return this.parentPath + File.separator + ConfigManager.configFileName;
try {
// 獲取classpath下的config.json路徑
// this.getClass().getClassLoader().getResource("config.json").getPath()
String classPath = this.getClass().getClassLoader().getResource("config.json").toURI().getPath();
return classPath;
} catch (URISyntaxException e) {
return null;
}
}
網頁輸出看看是否正確：http://localhost:8081/config?action=config服務器
6，此時點擊上傳圖片顯示 以下mvc
7，在源碼： BinaryUploader 類中 把原有的文件上傳request請求替換成spring的上傳控件
static Logger logger = LoggerFactory.getLogger(BinaryUploader.class);
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 {
// 把原有的文件上傳request請求替換成spring的上傳控件
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
if (multipartFile == null) {
return new BaseState(false, 7);
}
/*
* 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); }
*/
String savePath = (String) conf.get("savePath");
String localSavePathPrefix = (String) conf.get("localSavePathPrefix");
// spring
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, 8);
}
savePath = PathFormat.parse(savePath, originFileName);
localSavePathPrefix = localSavePathPrefix + savePath;
String physicalPath = localSavePathPrefix;
logger.info("BinaryUploader physicalPath:{},savePath:{}", localSavePathPrefix, savePath);
// spring
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 (IOException e) {
}
return new BaseState(false, AppInfo.IO_ERROR);
}
8，解決圖片上傳路徑問題
在config.json 增長 localSavePathPrefix 地址保存圖片
{
/* 上傳圖片配置項 */
"localSavePathPrefix":"D:/ueditor/images",
/* 上傳圖片配置項 */
"imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
"imageFieldName": "upfile", /* 提交的圖片表單名稱 */
"imageMaxSize": 2048000, /* 上傳大小限制，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
"imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
"imageInsertAlign": "none", /* 插入的圖片浮動方式 */
"imageUrlPrefix": "", /* 圖片訪問路徑前綴 */
"imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
修改源碼：ConfigManager 方法 getConfig
public Map<String, Object> getConfig(int type) {
Map<String, Object> conf = new HashMap<String, Object>();
String savePath = null;
// 增長接收要保存圖片的物理路徑
String localSavePathPrefix = 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");
localSavePathPrefix = this.jsonConfig.getString("localSavePathPrefix");
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");
localSavePathPrefix = this.jsonConfig.getString("localSavePathPrefix");
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");
localSavePathPrefix = this.jsonConfig.getString("localSavePathPrefix");
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");
localSavePathPrefix = this.jsonConfig.getString("localSavePathPrefix");
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");
localSavePathPrefix = this.jsonConfig.getString("localSavePathPrefix");
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"));
localSavePathPrefix = this.jsonConfig.getString("localSavePathPrefix");
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"));
localSavePathPrefix = this.jsonConfig.getString("localSavePathPrefix");
break;
}
conf.put("savePath", savePath);
conf.put("rootPath", this.rootPath);
// 接收要保存圖片的物理路徑
conf.put("localSavePathPrefix", localSavePathPrefix);
return conf;
}
而後修改 BinaryUploader 中新增的 localSavePathPrefix
String savePath = (String) conf.get("savePath");
String localSavePathPrefix = (String) conf.get("localSavePathPrefix");
此時點擊上傳 圖片會上傳到指定的目錄中
圖片顯示問題 在application.properties 中指定映射地址
#upload img set path
taogou.imagesPath=D:/fileUpload/
spring.mvc.static-path-pattern=/**
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${taogou.imagesPath}
至此 整合完成，
具體狀況具體配置，有什麼錯誤請留言指正