UEditor是由百度开发的富文本web编辑器。其后端jsp代码实现的文件保存/读取路径受限于传统文件系统且只能在应用的webapp目录下, 故作出修改。但是暂没有使用官方后端代码，且只实现了图片上传下载功能。
1. 下载
- 下载地址：http://ueditor.baidu.com/website/download.html, 下载其中的
jsp版本 -
文件解压后目录结构如下所示
目录结构.png
2. 搭建项目
2.1. 新建一个maven项目
2.2. pom依赖
UTF-8
1.7
1.7
4.11
4.3.9.RELEASE
1.3.2
2.3
1.6.4
2.8.7
1.2.4
3.0.1
junit
junit
${junit.version}
test
org.springframework
spring-context
${spring.version}
org.springframework
spring-webmvc
${spring.version}
com.fasterxml.jackson.core
jackson-databind
${jackson.version}
commons-io
commons-io
${commons.io.version}
commons-fileupload
commons-fileupload
${fileupload.version}
org.slf4j
slf4j-log4j12
${slf4j.version}
com.alibaba
fastjson
${fastjson.version}
javax.servlet
javax.servlet-api
${servlet.api.version}
- 2.3. spring-mvc.xml
- 2.4. applicationContext.xml
-
2.5. 将
ueditor下载解压后目录下图目录结构.png第1部分的代码拷贝到项目的webapp下，如下图所示：
项目结构.jpg 2.6. 将
ueditor下载解压后目录下图目录结构.png第2部分config.json的代码拷贝到项目的src/main/resources下，如下图所示：
config.png
3. 前端配置
修改2.4图中的ueditor.config.js的服务器请求路径
32 // 服务器统一请求接口路径
33 , serverUrl: URL + "./ueConvert"
4. 后端实现
- UEditorController.java
package com.github.brandonbai.springmvcueditordemo.controller;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import com.alibaba.fastjson.JSON;
/**
*
* @author brandonbai
*
*/
@Controller
public class UEditorController {
private static final String DIR_NAME = "~/Desktop";
private static final String PREFIX = "/editor/image";
private static final String FILE_SEPARATOR = File.separator;
private static final String PATH_SEPARATOR = "/";
private static final String PATH_FORMAT = "yyyyMMddHHmmss";
private static final String CONFIG_FILE_NAME = "config.json";
private static final String ACTION_NAME_CONFIG = "config";
private static final String ACTION_NAME_UPLOAD_IMAGE = "uploadimage";
private static final Logger logger = LoggerFactory.getLogger(UEditorController.class);
/**
* 配置、图片处理
*/
@RequestMapping("/ueConvert")
public void ueditorConvert(HttpServletRequest request, HttpServletResponse response, String action,
MultipartFile upfile) {
try {
request.setCharacterEncoding("utf-8");
response.setHeader("Content-Type", "text/html");
PrintWriter pw = response.getWriter();
if (ACTION_NAME_CONFIG.equals(action)) {
String content = readFile(this.getClass().getResource(PATH_SEPARATOR).getPath() + CONFIG_FILE_NAME);
pw.write(content);
} else if (ACTION_NAME_UPLOAD_IMAGE.equals(action)) {
Map map = new HashMap(16);
String time = new SimpleDateFormat(PATH_FORMAT).format(new Date());
try {
String originalFilename = upfile.getOriginalFilename();
String type = originalFilename.substring(originalFilename.lastIndexOf("."));
String dirName = DIR_NAME + PREFIX + FILE_SEPARATOR + time;
File dir = new File(dirName);
if(!dir.exists() || !dir.isDirectory()) {
dir.mkdirs();
}
String fileName = dirName + FILE_SEPARATOR + originalFilename;
upfile.transferTo(new File(fileName));
map.put("state", "SUCCESS");
map.put("original", originalFilename);
map.put("size", upfile.getSize());
map.put("title", fileName);
map.put("type", type);
map.put("url", "." + PREFIX + PATH_SEPARATOR + time + PATH_SEPARATOR + originalFilename);
} catch (Exception e) {
e.printStackTrace();
logger.error("upload file error", e);
map.put("state", "error");
}
response.setHeader("Content-Type", "application/json");
pw.write(JSON.toJSONString(map));
pw.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 图片读取
*/
@RequestMapping(PREFIX + "/{time}/{path}.{type}")
public void ueditorConvert(@PathVariable("time") String time, @PathVariable("path") String path,
@PathVariable("type") String type, HttpServletRequest request, HttpServletResponse response) {
try (FileInputStream fis = new FileInputStream(DIR_NAME + PREFIX + PATH_SEPARATOR + time + PATH_SEPARATOR + path + "." + type)) {
int len = fis.available();
byte[] data = new byte[len];
fis.read(data);
fis.close();
ServletOutputStream out = response.getOutputStream();
out.write(data);
out.close();
} catch (Exception e) {
logger.error("read file error", e);
}
}
private String readFile(String path) {
StringBuilder builder = new StringBuilder();
try(BufferedReader bfReader = new BufferedReader(new InputStreamReader(new FileInputStream(path), "UTF-8"))) {
String tmpContent = null;
while ((tmpContent = bfReader.readLine()) != null) {
builder.append(tmpContent);
}
bfReader.close();
} catch (Exception e) {
e.printStackTrace();
}
return builder.toString().replaceAll("/\\*[\\s\\S]*?\\*/", "");
}
}
5.演示
demo.gif
示例代码
https://github.com/brandonbai/springmvc-ueditor-demo