UEditor是由百度開發(fā)的富文本web編輯器徽鼎。其后端jsp代碼實(shí)現(xiàn)的文件保存/讀取路徑受限于傳統(tǒng)文件系統(tǒng)且只能在應(yīng)用的webapp目錄下, 故作出修改。但是暫沒有使用官方后端代碼椎工，且只實(shí)現(xiàn)了圖片上傳下載功能。
1. 下載
- 下載地址：http://ueditor.baidu.com/website/download.html, 下載其中的
jsp版本 -
文件解壓后目錄結(jié)構(gòu)如下所示
目錄結(jié)構(gòu).png
2. 搭建項(xiàng)目
2.1. 新建一個(gè)maven項(xiàng)目
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下載解壓后目錄下圖目錄結(jié)構(gòu).png第1部分的代碼拷貝到項(xiàng)目的webapp下，如下圖所示：
項(xiàng)目結(jié)構(gòu).jpg 2.6. 將
ueditor下載解壓后目錄下圖目錄結(jié)構(gòu).png第2部分config.json的代碼拷貝到項(xiàng)目的src/main/resources下发钝，如下圖所示：
config.png
3. 前端配置
修改2.4圖中的ueditor.config.js的服務(wù)器請(qǐng)求路徑
32 // 服務(wù)器統(tǒng)一請(qǐng)求接口路徑
33 , serverUrl: URL + "./ueConvert"
4. 后端實(shí)現(xiàn)
- 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
