mvc ueditor html,SpringMVC 集成 UEditor

UEditor是由百度开发的富文本web编辑器。其后端jsp代码实现的文件保存/读取路径受限于传统文件系统且只能在应用的webapp目录下, 故作出修改。但是暂没有使用官方后端代码，且只实现了图片上传下载功能。

1. 下载

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

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">

class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

2.4. applicationContext.xml

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">

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

示例代码