UEditor是由百度开发的富文本web编辑器。其后端jsp代码实现的文件保存/读取路径受限于传统文件系统且只能在应用的webapp目录下, 故作出修改。但是暂没有使用官方后端代码，且只实现了图片上传下载功能。
1. 下载
- 下载地址：http://ueditor.baidu.com/website/download.html, 下载其中的
jsp版本 -
文件解压后目录结构如下所示
目录结构.png
2. 搭建项目
2.1. 新建一个maven项目
2.2. pom依赖
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
<junit.version>4.11</junit.version>
<spring.version>4.3.9.RELEASE</spring.version>
<fileupload.version>1.3.2</fileupload.version>
<commons.io.version>2.3</commons.io.version>
<slf4j.version>1.6.4</slf4j.version>
<jackson.version>2.8.7</jackson.version>
<fastjson.version>1.2.4</fastjson.version>
<servlet.api.version>3.0.1</servlet.api.version>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>${commons.io.version}</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>${fileupload.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>${fastjson.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${servlet.api.version}</version>
</dependency>
</dependencies>
- 2.3. spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<mvc:annotation-driven/>
<context:component-scan base-package="com.github.brandonbai.springmvcueditordemo.controller" />
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8" />
<property name="maxUploadSize" value="10485760000" />
<property name="maxInMemorySize" value="40960" />
</bean>
<mvc:default-servlet-handler />
</beans>
- 2.4. applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">
<context:component-scan base-package="com.github.brandonbai.springmvcueditordemo" />
</beans>
-
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<String, Object> map = new HashMap<String, Object>(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
