1辱士、ueditor官網(wǎng)最新版下載地址: https://ueditor.baidu.com/website/download.html
[1.4.3.3 Jsp 版本] UTF-8版 2016-02-25
2佩研、現(xiàn)象: 集成springboot集成JSP版的ueditor時(shí)，往往出現(xiàn)以下問(wèn)題
配置加載
分析：1剥险、路徑不對(duì) 2、加載文件讀取失敗
解決：尋找路徑配置文件吗坚，ueditor.config.js
//為編輯器實(shí)例添加一個(gè)路徑蕉毯，這個(gè)不能被注釋
UEDITOR_HOME_URL: URL
// 服務(wù)器統(tǒng)一請(qǐng)求接口路徑
, serverUrl: URL + "jsp/controller.jsp"
//工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的實(shí)例時(shí)選擇自己需要的重新定義
作用：該配置的目的是讓serverUrl訪問(wèn)到controller.jsp頁(yè)面
<%@ page language="java" contentType="text/html; charset=UTF-8"
import="com.baidu.ueditor.ActionEnter"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");
String rootPath = application.getRealPath( "/" );
out.write( new ActionEnter( request, rootPath ).exec() );
%>
作用：通過(guò)controller.jsp頁(yè)面以及jsp/lib包下面的ueditor-1.1.2.jar來(lái)讀取并解析config.json文件
image.png
/* 前后端通信相關(guān)的配置,注釋只允許使用多行方式 */
{
/* 上傳圖片配置項(xiàng) */
"imageActionName": "uploadimage", /* 執(zhí)行上傳圖片的action名稱 */
"imageFieldName": "upfile", /* 提交的圖片表單名稱 */
"imageMaxSize": 2048000, /* 上傳大小限制西雀，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imageCompressEnable": true, /* 是否壓縮圖片,默認(rèn)是true */
"imageCompressBorder": 1600, /* 圖片壓縮最長(zhǎng)邊限制 */
"imageInsertAlign": "none", /* 插入的圖片浮動(dòng)方式 */
"imageUrlPrefix": "", /* 圖片訪問(wèn)路徑前綴 */
3萨驶、解決：只要通過(guò)合理的訪問(wèn)路徑解析到config.json文件就可以讓文件上傳功能正常使用
4、搭建springboot開發(fā)環(huán)境艇肴，前端框架使用jasper
可以在 start.spring.io 這個(gè)網(wǎng)址創(chuàng)建一個(gè)web工程
創(chuàng)建工程
解壓導(dǎo)入到idea中腔呜，新建工程目錄、類豆挽，解壓ueditor到對(duì)應(yīng)目錄結(jié)構(gòu)中如下圖所示
工程結(jié)構(gòu)
5育谬、修改pom.xml
<?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>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.20.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.cool.demo</groupId>
<artifactId>cool-demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>cool-demo</name>
<description>Demo project for Spring Boot with ueditor</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<!-- <scope>provided</scope>-->
</dependency>
<!--UEditor的依賴 -->
<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>
6券盅、針對(duì)讀取config.json文件編寫對(duì)應(yīng)代碼帮哈，首先將config.json寫成后端路徑訪問(wèn)模式
package com.cool.demo.vo;
/**
* Created by admin on 2019/4/13.
*/
public class PublicMsg {
public final static String UEDITOR_CONFIG = "{\n" +
" \"imageActionName\": \"uploadimage\",\n" +
" \"imageFieldName\": \"upfile\",\n" +
" \"imageMaxSize\": 2048000,\n" +
" \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
" \"imageCompressEnable\": true,\n" +
" \"imageCompressBorder\": 1600,\n" +
" \"imageInsertAlign\": \"none\",\n" +
" \"imageUrlPrefix\": \"\",\n" +
" \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
"\n" +
" \"scrawlActionName\": \"uploadscrawl\",\n" +
" \"scrawlFieldName\": \"upfile\",\n" +
" \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"scrawlMaxSize\": 2048000,\n" +
" \"scrawlUrlPrefix\": \"\",\n" +
" \"scrawlInsertAlign\": \"none\",\n" +
"\n" +
" \"snapscreenActionName\": \"uploadimage\",\n" +
" \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"snapscreenUrlPrefix\": \"\",\n" +
" \"snapscreenInsertAlign\": \"none\",\n" +
"\n" +
" \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
" \"catcherActionName\": \"catchimage\",\n" +
" \"catcherFieldName\": \"source\",\n" +
" \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"catcherUrlPrefix\": \"\",\n" +
" \"catcherMaxSize\": 2048000,\n" +
" \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
"\n" +
" \"videoActionName\": \"uploadvideo\",\n" +
" \"videoFieldName\": \"upfile\",\n" +
" \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"videoUrlPrefix\": \"\",\n" +
" \"videoMaxSize\": 102400000,\n" +
" \"videoAllowFiles\": [\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"],\n" +
"\n" +
" \"fileActionName\": \"uploadfile\",\n" +
" \"fileFieldName\": \"upfile\",\n" +
" \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"fileUrlPrefix\": \"\",\n" +
" \"fileMaxSize\": 51200000,\n" +
" \"fileAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ],\n" +
"\n" +
" \"imageManagerActionName\": \"listimage\",\n" +
" \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
" \"imageManagerListSize\": 20,\n" +
" \"imageManagerUrlPrefix\": \"\",\n" +
" \"imageManagerInsertAlign\": \"none\",\n" +
" \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
"\n" +
" \"fileManagerActionName\": \"listfile\",\n" +
" \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\",\n" +
" \"fileManagerUrlPrefix\": \"\",\n" +
" \"fileManagerListSize\": 20,\n" +
" \"fileManagerAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ] \n" +
"\n" +
"}";
7、編寫訪問(wèn)路徑UeditorController.java锰镀，包含返回config.json配置信息娘侍，以及文件上傳功能
package com.cool.demo.cooldemo;
import com.cool.demo.vo.PublicMsg;
import org.apache.commons.io.FilenameUtils;
import org.apache.commons.io.output.StringBuilderWriter;
import org.springframework.stereotype.Controller;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.util.HashMap;
import java.util.Map;
/**
* Created by admin on 2019/4/13.
*/
@Controller
public class UeditorController {
/**
* 替換ueditor jsp/controller.jsp文件
* 由于controller.jsp + lib下面的ueditor-1.1.2.jar的作用是讀取config.json文件，所以這里直接將config.json文件以字符串的形式返回給了前端
* @param request
* @return
*/
@RequestMapping(value = "/ueditor")
@ResponseBody
public String ueditor(HttpServletRequest request) {
return PublicMsg.UEDITOR_CONFIG;
}
private static final String STORE_PATH = "/image/upload/";
private static final String SERVER_PATH = "http://localhost:8080";
@RequestMapping(value = "/imgUpload")
@ResponseBody
public Map<String, Object> imgUpload(HttpServletRequest request,HttpSession session) {
Map<String, Object> rs = new HashMap<String, Object>();
MultipartHttpServletRequest mReq = null;
MultipartFile file = null;
String fileName = "";
String originalFileName = "";
try {
mReq = (MultipartHttpServletRequest) request;
// 從config.json中取得上傳文件的ID "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
file = mReq.getFile("upfile");
if (!file.isEmpty()) {
// 取得文件的原始文件名稱
originalFileName = file.getOriginalFilename();
fileName = originalFileName;
// 設(shè)置上傳目錄
String ext = (FilenameUtils.getExtension(file.getOriginalFilename())).toLowerCase();
String storePath = "";
if ("jpg".equals(ext) || "png".equals(ext) || "jpeg".equals(ext) || "bmp".equals(ext)) {
storePath = STORE_PATH;
} else {
storePath = STORE_PATH;
}
//獲取服務(wù)器根目錄
File path = new File("");
// 編輯上傳目錄泳炉，使其生效
File uploadPath = new File(session.getServletContext().getRealPath("/"),storePath);
//獲取上傳的圖片具體路徑
File targetFile = new File(uploadPath, fileName);
//獲取父目錄
File pfile = new File(uploadPath.getAbsolutePath());
//判斷如果目錄不存在憾筏，先創(chuàng)建
if(!pfile.exists())pfile.mkdirs();
// 文件上傳
file.transferTo(targetFile);
rs.put("state", "SUCCESS"); // UEDITOR的規(guī)則:不為SUCCESS則顯示state的內(nèi)容
rs.put("url",SERVER_PATH + STORE_PATH + fileName); //能訪問(wèn)到你現(xiàn)在圖片的路徑
rs.put("title", originalFileName);
rs.put("original", originalFileName);
}
} catch (Exception e) {
e.printStackTrace();
rs.put("state", "文件上傳失敗!"); //在此處寫上錯(cuò)誤提示信息，這樣當(dāng)錯(cuò)誤的時(shí)候就會(huì)顯示此信息
rs.put("url", "");
rs.put("title", "");
rs.put("original", "");
}
return rs;
}
}
8花鹅、修改ueditor.config.js氧腰，訪問(wèn)ueditor解析config.json
window.UEDITOR_CONFIG = {
//為編輯器實(shí)例添加一個(gè)路徑，這個(gè)不能被注釋
UEDITOR_HOME_URL: URL
// 服務(wù)器統(tǒng)一請(qǐng)求接口路徑
, serverUrl: "/ueditor" // "ueditor" // 這個(gè)路徑也是可以的
9刨肃、ueditor解壓后全部放置在webapp/ueditor下古拴，具體參考上面圖片；將index.html內(nèi)容拷貝到index.jsp中真友，修改以下引用文件的路徑src="/ueditor/ueditor.config.js"黄痪，并添加以下內(nèi)容
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
<!--建議手動(dòng)加在語(yǔ)言，避免在ie下有時(shí)因?yàn)榧虞d語(yǔ)言失敗導(dǎo)致編輯器加載失敗-->
<!--這里加載的語(yǔ)言文件會(huì)覆蓋你在配置項(xiàng)目里添加的語(yǔ)言類型盔然，比如你在配置項(xiàng)目里配置的是英文桅打，這里加載的中文是嗜，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
div{
width:100%;
}
</style>
</head>
<script type="text/javascript">
// 文件上傳配置
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return 'http://localhost:8080/imgUpload';
//'http://localhost:8080/imgUpload';為方法imgUpload的訪問(wèn)地址
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
10、至此ueditor部分整合完畢挺尾，接著配置web項(xiàng)目鹅搪，在application.properties添加如下內(nèi)容
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp
11、啟動(dòng)CoolDemoApplication.java潦嘶，瀏覽器訪問(wèn)
http://localhost:8080/index
查看整個(gè)流程
成功上傳界面
正常顯示
總結(jié)：基本上涩嚣，jsp/lib目錄下的文件可以不用，因?yàn)橄鄳?yīng)的jar包在pom.xml中導(dǎo)入了掂僵；其中的ueditor-1.1.2.jar和controller.jsp改為了后端讀取
13航厚、附上對(duì)應(yīng)代碼，詳見(jiàn)gitee锰蓬，文件上傳功能均可用
https://gitee.com/coolfxl/springboot-jsp-ueditor
