UEditor很好用，但是它的圖片默認是上傳到項目中，重新部署項目后之前的圖片全會被刪掉（坑爹），為了實現把圖片傳到其他地方，如阿里云的OSS（不是打廣告），可以進行以下改造實現。
后端配置
- 在下載的包里面
./jsp/lib有5個jar包，其中commons-*.jar與json.jar可通過maven下載，ueditor-*.jarMaven上有但是不是官方上傳的，所以我手動導入到項目 - 把整個包復制到項目資源目錄，如放到
WEB-INF目錄下還要通過一下特殊配置，如直接放到webapp目錄下可參考官方文檔 - 假設插件放置位置為
WEB-INF/assets/plugins/ueditor,因為WEB-INF目錄下內容不能直接訪問，ueditor/jsp/controller.jsp是無法配置的，所以需要通過Spring Mvc中的Controller轉發訪問 - 項目新建一個Controller并配置RequestMapping
Controller
@Controller
@RequestMapping("/ueditor")
public class UEditorController {
/**
* UEditor 入口
*
* @return
*/
@RequestMapping("/controller")
public String controller() {
return "common/_ueditor";
}
}
common/_ueditor.jsp
<jsp:forward page ="/WEB-INF/assets/plugins/ueditor/jsp/controller.jsp" />
- 在要調用ueditor的頁面配置ueditor
<!--配置文件-->
<script src="<%=request.getContextPath()%>/assets/plugins/ueditor/ueditor.config.js"></script>
<!--必須放到ueditor.config.js之后，ueditor.all.mim.js之前，路徑根據實際情況修改-->
<script>
window.UEDITOR_CONFIG.serverUrl = "<%=request.getContextPath()%>/ueditor/controller"
</script>
<!-- 編輯器源碼文件 -->
<script src="<%=request.getContextPath()%>/assets/plugins/ueditor/ueditor.all.min.js"></script>
- 到此ueditor的后端配置完成，調用方法可參考官方文檔
改造
1.重寫ActionEnter類
import com.baidu.ueditor.ConfigManager;
import com.baidu.ueditor.define.ActionMap;
import com.baidu.ueditor.define.BaseState;
import com.baidu.ueditor.define.State;
import com.baidu.ueditor.hunter.FileManager;
import com.baidu.ueditor.hunter.ImageHunter;
import javax.servlet.http.HttpServletRequest;
import java.util.Map;
/**
* Created by GustinLau on 2017-05-11.
*/
public class ActionEnter extends com.baidu.ueditor.ActionEnter {
private HttpServletRequest request = null;
private String rootPath = null;
private String contextPath = null;
private String actionType = null;
private ConfigManager configManager = null;
public ActionEnter(HttpServletRequest request, String rootPath) {
super(request, rootPath);
this.request = request;
this.rootPath = rootPath;
this.actionType = request.getParameter("action");
this.contextPath = request.getContextPath();
this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath, request.getRequestURI());
}
@Override
public String invoke() {
if(this.actionType != null && ActionMap.mapping.containsKey(this.actionType)) {
if(this.configManager != null && this.configManager.valid()) {
State state = null;
int actionCode = ActionMap.getType(this.actionType);
Map<String, Object> conf = null;
switch(actionCode) {
case 0:
return this.configManager.getAllConfig().toString();
case 1:
case 2:
case 3:
case 4:
conf = this.configManager.getConfig(actionCode);
state = (new Uploader(this.request, conf)).doExec();
break;
case 5:
conf = this.configManager.getConfig(actionCode);
String[] list = this.request.getParameterValues((String)conf.get("fieldName"));
state = (new ImageHunter(conf)).capture(list);
break;
case 6:
case 7:
conf = this.configManager.getConfig(actionCode);
int start = this.getStartIndex();
state = (new FileManager(conf)).listFile(start);
}
return state.toJSONString();
} else {
return (new BaseState(false, 102)).toJSONString();
}
} else {
return (new BaseState(false, 101)).toJSONString();
}
}
}
其中case 4中的Uploader需要重寫
2.重寫Uploader
import com.baidu.ueditor.define.State;
import javax.servlet.http.HttpServletRequest;
import java.util.Map;
/**
* Created by GustinLau on 2017-05-11.
*/
public class Uploader {
private HttpServletRequest request = null;
private Map<String, Object> conf = null;
public Uploader(HttpServletRequest request, Map<String, Object> conf) {
this.request = request;
this.conf = conf;
}
public final State doExec() {
String filedName = (String) this.conf.get("fieldName");
State state;
if ("true".equals(this.conf.get("isBase64"))) {
state = Base64Uploader.save(this.request.getParameter(filedName), this.conf);
} else {
state = BinaryUploader.save(this.request, this.conf);
}
return state;
}
}
其中Base64Uploader和BinaryUploader需要重寫
3.重寫Base64Uploader，主要用于涂鴉功能
import com.baidu.ueditor.PathFormat;
import com.baidu.ueditor.define.BaseState;
import com.baidu.ueditor.define.FileType;
import com.baidu.ueditor.define.State;
import com.xiaosuokeji.feelschool.admin.util.OssUtils;
import org.apache.commons.codec.binary.Base64;
import java.io.ByteArrayInputStream;
import java.util.Map;
/**
* Created by GustinLau on 2017-05-11.
*/
public class Base64Uploader {
public static State save(String content, Map<String, Object> conf) {
byte[] data = decode(content);
long maxSize = ((Long) conf.get("maxSize")).longValue();
if (!validSize(data, maxSize)) {
return new BaseState(false, 1);
} else {
String suffix = FileType.getSuffix("JPG");
String savePath = PathFormat.parse((String) conf.get("savePath"), (String) conf.get("filename"));
savePath = savePath + suffix;
//自定義處理部分
//將byte[]轉換成輸入流
ByteArrayInputStream is = new ByteArrayInputStream(data);
//圖片上傳到阿里云OSS服務器，自己寫的工具類
Map result = OssUtils.ueditorUpload(is, savePath);
//構造對應的Stage讓UEditor讀取
State storageState = new BaseState((boolean) result.get("status"));
if (storageState.isSuccess()) {
storageState.putInfo("url", (String) result.get("url"));
storageState.putInfo("type", suffix);
storageState.putInfo("original", "");
}
return storageState;
}
}
private static byte[] decode(String content) {
return Base64.decodeBase64(content);
}
private static boolean validSize(byte[] data, long length) {
return (long) data.length <= length;
}
}
4.重寫BinaryUploader主要用于上傳圖片
import com.baidu.ueditor.PathFormat;
import com.baidu.ueditor.define.BaseState;
import com.baidu.ueditor.define.FileType;
import com.baidu.ueditor.define.State;
import com.xiaosuokeji.feelschool.admin.util.OssUtils;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
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;
/**
* Created by GustinLau on 2017-05-11.
*/
public class BinaryUploader {
public static final State save(HttpServletRequest request, Map<String, Object> conf) {
MultipartFile multipartFile = null;
boolean isAjaxUpload = request.getHeader("X_Requested_With") != null;
if (!ServletFileUpload.isMultipartContent(request)) {
return new BaseState(false, 5);
} else {
ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory());
if (isAjaxUpload) {
upload.setHeaderEncoding("UTF-8");
}
//自定義處理部分
try {
//request獲取MultipartFile對象
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
if (multipartFile == null) {
return new BaseState(false, 7);
} else {
//重命名
String savePath = (String) conf.get("savePath");
String originFileName = multipartFile.getOriginalFilename();
String suffix = FileType.getSuffixByFilename(originFileName);
originFileName = originFileName.substring(0, originFileName.length() - suffix.length());
savePath = savePath + suffix;
if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
return new BaseState(false, 8);
} else {
savePath = PathFormat.parse(savePath, originFileName);
//獲取輸入流
InputStream is = multipartFile.getInputStream();
//上傳到阿里云OSS
Map result = OssUtils.ueditorUpload(is, savePath);
//構造State
State storageState = new BaseState((boolean) result.get("status"));
is.close();
if (storageState.isSuccess()) {
storageState.putInfo("url", (String) result.get("url"));
storageState.putInfo("type", suffix);
storageState.putInfo("original", originFileName + suffix);
}
return storageState;
}
}
} catch (IOException e) {
return new BaseState(false, 4);
}
}
}
private static boolean validType(String type, String[] allowTypes) {
List<String> list = Arrays.asList(allowTypes);
return list.contains(type);
}
}
5.將在WEB-INF/assets/plugins/ueditor/jsp/controller.jsp中的ActionEnter換自己重寫的ActionEnter
依賴
<!--ueditor-->
<dependency>
<groupId>com.baidu</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.2</version>
<scope>system</scope>
<systemPath>${project.basedir}/lib/ueditor-1.1.2.jar</systemPath>
</dependency>
<!--json-->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160212</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<!--fileupload-->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
備注
記得在spring.xml中配置MultipartResolver
<!-- 配置MultipartResolver 用于文件上傳 使用spring的CommonsMultipartResolver -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"/>
<property name="maxUploadSize" value="${file.maxSize}"/>
<property name="resolveLazily" value="true"/>
</bean>
