飞虎兄

飞虎兄

Developer

© 2019

  • SpringMVC 集成 UEditor

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

    1. 下载

    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