SpringMVC集成UEditor

2022-11-03 07:17:14

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

示例代码

https://github.com/brandonbai/springmvc-ueditor-demo

码农公寓

1. 下载

2. 搭建项目

3. 前端配置

4. 后端实现

5.演示

示例代码

相关文章