devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Spring整合UEditor富文本编辑器，并上传图片(最全教程)_ueditor 上传图片 spring

作者：我家小花儿 | 2024-08-06 10:04:16

赞

踩

ueditor 上传图片 spring

目录

 

前戏

创建项目

下载UEditor的JSP版本

在服务器端进行编码配置

在前端页面使用并配置UEditor编辑器

实现上传图片的功能(上传附件、文件等同理)

前戏

博主最近在做的项目中，有一个发布新闻的需求，所以用到了富文本编辑器，经过前端人员的对比分析，最终采用了百度开源的UEditor编辑器。

但是这个事情并不是前端一个部门的事，这是需要前后端配合的，因为涉及到上传图片、文件或附件，一开始踩了很多坑，网友们的意见也是参差不齐，现在终于理清了，完美整合到了项目中，在这里做一下记录，希望帮助到需要的人。

本文章中的示例，采用SSM实现(当然这里没有MyBatis)，因为它需要下载UEditor提供的一些JSP版本的文件夹，这些在Spring Boot中配置起来是不划算的，而且我觉得Spring Boot这玩意儿，应该只用来开发分布式或者说微服务的API接口，涉及到页面的东西最好不要采用它。

创建项目

采用maven工具创建，具体的流程不说了，想必各位创建一个maven项目还是不在话下的，只贴一下结构：

其中UEController.java、home.html我们先让它空着，其他文件的内容：

PageController.java：

  1. package com.blog.ueditor.controller;
  2.  
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  5.  
  6. /**
  7.  *  页面转发器
  8.  * @author 秋枫艳梦
  9.  * @date 2019-06-21
  10.  * */
  11. @Controller
  12. public class PageController {
  13.  
  14.     /**
  15.      *  跳到富文本编辑页面
  16.      * @return 视图名称
  17.      *
  18.      * */
  19.     @RequestMapping(value = "/home.html")
  20.     public String goHome(){
  21.         return "home";
  22.     }
  23. }

application-context.xml：

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.        xmlns:p="http://www.springframework.org/schema/p"
  5.        xmlns:aop="http://www.springframework.org/schema/aop"
  6.        xmlns:tx="http://www.springframework.org/schema/tx"
  7.        xmlns:context="http://www.springframework.org/schema/context"
  8.        xsi:schemaLocation="http://www.springframework.org/schema/beans
  9.         http://www.springframework.org/schema/beans/spring-beans.xsd
  10.         http://www.springframework.org/schema/tx
  11.         http://www.springframework.org/schema/tx/spring-tx.xsd
  12.         http://www.springframework.org/schema/aop
  13.         http://www.springframework.org/schema/aop/spring-aop.xsd
  14.         http://www.springframework.org/schema/context
  15.         http://www.springframework.org/schema/context/spring-context.xsd
  16. ">
  17.     <context:component-scan base-package="com.blog.ueditor.controller"/>
  18.     <context:annotation-config />
  19. </beans>

application-servlet.xml：

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.        xmlns:mvc="http://www.springframework.org/schema/mvc"
  5.        xmlns:p="http://www.springframework.org/schema/p"
  6.        xmlns:context="http://www.springframework.org/schema/context"
  7.        xsi:schemaLocation="http://www.springframework.org/schema/beans
  8.         http://www.springframework.org/schema/beans/spring-beans.xsd
  9.         http://www.springframework.org/schema/context
  10.         http://www.springframework.org/schema/context/spring-context.xsd
  11.         http://www.springframework.org/schema/mvc
  12.         http://www.springframework.org/schema/mvc/spring-mvc.xsd
  13. ">
  14.     <import resource="application-context.xml"/>  <!--引入另一篇配置文件-->
  15.     <mvc:resources mapping="/statics/**" location="/statics/"/>
  16.  
  17.  
  18.     <!--完成请求与处理器之间的映射，并处理JSON数据格式的转码-->
  19.     <mvc:annotation-driven>
  20.         <mvc:message-converters>
  21.             <!--处理时间格式-->
  22.             <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
  23.                 <property name="supportedMediaTypes">
  24.                     <list>
  25.                         <value>text/html;charset=UTF-8</value>
  26.                         <value>application/json;charset=UTF-8</value>
  27.                     </list>
  28.                 </property>
  29.                 <property name="features">
  30.                     <list>
  31.                         <value>WriteDateUseDateFormat</value>
  32.                     </list>
  33.                 </property>
  34.             </bean>
  35.         </mvc:message-converters>
  36.     </mvc:annotation-driven>
  37.  
  38.  
  39.     <!--配置视图解析器-->
  40.     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  41.         <property name="prefix" value="/"/>
  42.         <property name="suffix" value=".jsp"/>
  43.     </bean>
  44.  
  45.     <!-- html视图解析器 --> <!-- 必须先配置freemarkerConfig,注意html是没有prefix前缀属性的 -->
  46.     <bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
  47.         <property name="templateLoaderPath">
  48.             <value>/html/</value>
  49.         </property>
  50.         <property name="freemarkerSettings">
  51.             <props>
  52.                 <prop key="default_encoding">UTF-8</prop>
  53.             </props>
  54.         </property>
  55.     </bean>
  56.     <bean id="htmlviewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
  57.         <property name="suffix" value=".html"/>
  58.         <property name="order" value="0"/>
  59.         <property name="contentType" value="text/html;charset=UTF-8"/>
  60.     </bean>
  61.  
  62.  
  63.     <!--配置MultipartResolver，上传文件-->
  64.     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  65.         <property name="maxUploadSize" value="5000000"/>
  66.         <property name="defaultEncoding" value="UTF-8"/>
  67.     </bean>
  68. </beans>

web.xml：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  5.          version="4.0">
  6.   <display-name>Archetype Created Web Application</display-name>
  7.  
  8.   
  9.   <!--定义核心Servlet,MVC的入口-->
  10.   <servlet>
  11.     <servlet-name>DispatcherServlet</servlet-name>
  12.     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  13.     <init-param>
  14.       <param-name>contextConfigLocation</param-name>
  15.       <param-value>classpath:application-*.xml</param-value>
  16.     </init-param>
  17.     <load-on-startup>1</load-on-startup>
  18.   </servlet>
  19.   <servlet-mapping>
  20.     <servlet-name>DispatcherServlet</servlet-name>
  21.     <url-pattern>/</url-pattern>
  22.   </servlet-mapping>
  23.   <servlet-mapping>
  24.     <servlet-name>DispatcherServlet</servlet-name>
  25.     <url-pattern>/home.html</url-pattern>
  26.   </servlet-mapping>
  27.  
  28.  
  29.   <!--定义Spring字节编码过滤器-->
  30.   <filter>
  31.     <filter-name>encodingFilter</filter-name>
  32.     <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  33.     <init-param>
  34.       <param-name>encoding</param-name>
  35.       <param-value>UTF-8</param-value>
  36.     </init-param>
  37.     <init-param>
  38.       <param-name>forceEncoding</param-name>
  39.       <param-value>true</param-value>
  40.     </init-param>
  41.   </filter>
  42.   <filter-mapping>
  43.     <filter-name>encodingFilter</filter-name>
  44.     <url-pattern>/*</url-pattern>
  45.   </filter-mapping>
  46.  
  47.   <!--配置环境参数，指定Spring配置文件所在的位置-->
  48.   <context-param>
  49.     <param-name>contextConfigLocation</param-name>
  50.     <param-value>classpath:application-*.xml</param-value>
  51.   </context-param>
  52.  
  53.   <!--定义监听器，Web容器一启动，就启动Spring容器-->
  54.   <listener>
  55.     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  56.   </listener>
  57.   
  58.   <welcome-file-list>
  59.     <welcome-file>home.html</welcome-file>
  60.   </welcome-file-list>
  61.  
  62. </web-app>

好了，到这里，我们的环境已经准备好了，接下来让我们下载UE编辑器并进行必要的配置。

下载UEditor的JSP版本

UEditor下载地址传送门

下载完成之后解压出来，是一个utf8-jsp文件夹，复制到项目的根目录，即webapps下：

 然后我们把以下jar包添加到自己的pom.xml中：

贴一下最终的pom.xml（以我的为例）：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2.  
  3. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  5.   <modelVersion>4.0.0</modelVersion>
  6.  
  7.   <groupId>com.blog.ueditor</groupId>
  8.   <artifactId>demo</artifactId>
  9.   <version>1.0</version>
  10.   <packaging>war</packaging>
  11.  
  12.   <name>demo Maven Webapp</name>
  13.   <!-- FIXME change it to the project's website -->
  14.   <url>http://www.example.com</url>
  15.  
  16.   <properties>
  17.     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  18.     <maven.compiler.source>1.7</maven.compiler.source>
  19.     <maven.compiler.target>1.7</maven.compiler.target>
  20.   </properties>
  21.  
  22.   <dependencies>
  23.     <dependency>
  24.       <groupId>junit</groupId>
  25.       <artifactId>junit</artifactId>
  26.       <version>4.11</version>
  27.       <scope>test</scope>
  28.     </dependency>
  29.  
  30.     <dependency>
  31.       <groupId>javax.annotation</groupId>
  32.       <artifactId>javax.annotation-api</artifactId>
  33.       <version>1.3.1</version>
  34.     </dependency>
  35.  
  36.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-context-support -->
  37.     <dependency>
  38.       <groupId>org.springframework</groupId>
  39.       <artifactId>spring-context-support</artifactId>
  40.       <version>5.1.5.RELEASE</version>
  41.     </dependency>
  42.  
  43.     <dependency>
  44.       <groupId>org.freemarker</groupId>
  45.       <artifactId>freemarker</artifactId>
  46.       <version>2.3.28</version>
  47.     </dependency>
  48.  
  49.  
  50.     <!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
  51.     <dependency>
  52.       <groupId>javax.servlet</groupId>
  53.       <artifactId>jstl</artifactId>
  54.       <version>1.2</version>
  55.     </dependency>
  56.  
  57.     <!-- https://mvnrepository.com/artifact/taglibs/standard -->
  58.     <dependency>
  59.       <groupId>taglibs</groupId>
  60.       <artifactId>standard</artifactId>
  61.       <version>1.1.2</version>
  62.     </dependency>
  63.  
  64.     <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
  65.     <dependency>
  66.       <groupId>javax.servlet</groupId>
  67.       <artifactId>javax.servlet-api</artifactId>
  68.       <version>3.1.0</version>
  69.       <scope>provided</scope>
  70.     </dependency>
  71.  
  72.     <dependency>
  73.       <groupId>junit</groupId>
  74.       <artifactId>junit</artifactId>
  75.       <version>4.11</version>
  76.       <scope>test</scope>
  77.     </dependency>
  78.  
  79.     <!--Spring模块-->
  80.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-aop -->
  81.     <dependency>
  82.       <groupId>org.springframework</groupId>
  83.       <artifactId>spring-aop</artifactId>
  84.       <version>5.1.3.RELEASE</version>
  85.     </dependency>
  86.  
  87.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects -->
  88.     <dependency>
  89.       <groupId>org.springframework</groupId>
  90.       <artifactId>spring-aspects</artifactId>
  91.       <version>5.1.3.RELEASE</version>
  92.     </dependency>
  93.  
  94.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-beans -->
  95.     <dependency>
  96.       <groupId>org.springframework</groupId>
  97.       <artifactId>spring-beans</artifactId>
  98.       <version>5.1.3.RELEASE</version>
  99.     </dependency>
  100.  
  101.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
  102.     <dependency>
  103.       <groupId>org.springframework</groupId>
  104.       <artifactId>spring-context</artifactId>
  105.       <version>5.1.3.RELEASE</version>
  106.     </dependency>
  107.  
  108.  
  109.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-core -->
  110.     <dependency>
  111.       <groupId>org.springframework</groupId>
  112.       <artifactId>spring-core</artifactId>
  113.       <version>5.1.3.RELEASE</version>
  114.     </dependency>
  115.  
  116.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-expression -->
  117.     <dependency>
  118.       <groupId>org.springframework</groupId>
  119.       <artifactId>spring-expression</artifactId>
  120.       <version>5.1.3.RELEASE</version>
  121.     </dependency>
  122.  
  123.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-instrument -->
  124.     <dependency>
  125.       <groupId>org.springframework</groupId>
  126.       <artifactId>spring-instrument</artifactId>
  127.       <version>5.1.3.RELEASE</version>
  128.     </dependency>
  129.  
  130.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
  131.     <dependency>
  132.       <groupId>org.springframework</groupId>
  133.       <artifactId>spring-jdbc</artifactId>
  134.       <version>5.1.3.RELEASE</version>
  135.     </dependency>
  136.  
  137.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-messaging -->
  138.     <dependency>
  139.       <groupId>org.springframework</groupId>
  140.       <artifactId>spring-messaging</artifactId>
  141.       <version>5.1.3.RELEASE</version>
  142.     </dependency>
  143.  
  144.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-test -->
  145.     <dependency>
  146.       <groupId>org.springframework</groupId>
  147.       <artifactId>spring-test</artifactId>
  148.       <version>5.1.3.RELEASE</version>
  149.       <scope>test</scope>
  150.     </dependency>
  151.  
  152.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-tx -->
  153.     <dependency>
  154.       <groupId>org.springframework</groupId>
  155.       <artifactId>spring-tx</artifactId>
  156.       <version>5.1.3.RELEASE</version>
  157.     </dependency>
  158.  
  159.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-web -->
  160.     <dependency>
  161.       <groupId>org.springframework</groupId>
  162.       <artifactId>spring-web</artifactId>
  163.       <version>5.1.3.RELEASE</version>
  164.     </dependency>
  165.  
  166.     <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
  167.     <dependency>
  168.       <groupId>org.springframework</groupId>
  169.       <artifactId>spring-webmvc</artifactId>
  170.       <version>5.1.3.RELEASE</version>
  171.     </dependency>
  172.  
  173.     <!-- https://mvnrepository.com/artifact/aopalliance/aopalliance -->
  174.     <dependency>
  175.       <groupId>aopalliance</groupId>
  176.       <artifactId>aopalliance</artifactId>
  177.       <version>1.0</version>
  178.     </dependency>
  179.  
  180.     <!-- https://mvnrepository.com/artifact/org.aspectj/aspectjweaver -->
  181.     <dependency>
  182.       <groupId>org.aspectj</groupId>
  183.       <artifactId>aspectjweaver</artifactId>
  184.       <version>1.9.2</version>
  185.     </dependency>
  186.  
  187.     <!-- https://mvnrepository.com/artifact/log4j/log4j -->
  188.     <dependency>
  189.       <groupId>log4j</groupId>
  190.       <artifactId>log4j</artifactId>
  191.       <version>1.2.17</version>
  192.     </dependency>
  193.  
  194.  
  195.     <!--文件模块-->
  196.     <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
  197.     <dependency>
  198.       <groupId>commons-io</groupId>
  199.       <artifactId>commons-io</artifactId>
  200.       <version>2.6</version>
  201.     </dependency>
  202.  
  203.     <!-- https://mvnrepository.com/artifact/commons-logging/commons-logging -->
  204.     <dependency>
  205.       <groupId>commons-logging</groupId>
  206.       <artifactId>commons-logging</artifactId>
  207.       <version>1.2</version>
  208.     </dependency>
  209.  
  210.     <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
  211.     <dependency>
  212.       <groupId>org.apache.commons</groupId>
  213.       <artifactId>commons-lang3</artifactId>
  214.       <version>3.8.1</version>
  215.     </dependency>
  216.  
  217.     <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
  218.     <dependency>
  219.       <groupId>commons-fileupload</groupId>
  220.       <artifactId>commons-fileupload</artifactId>
  221.       <version>1.3.3</version>
  222.     </dependency>
  223.  
  224.     <!-- https://mvnrepository.com/artifact/com.gitee.qdbp.thirdparty/ueditor -->
  225.     <dependency>
  226.       <groupId>com.gitee.qdbp.thirdparty</groupId>
  227.       <artifactId>ueditor</artifactId>
  228.       <version>1.4.3.3</version>
  229.     </dependency>
  230.  
  231.     <!-- https://mvnrepository.com/artifact/org.json/json -->
  232.     <dependency>
  233.       <groupId>org.json</groupId>
  234.       <artifactId>json</artifactId>
  235.       <version>20160810</version>
  236.     </dependency>
  237.  
  238.     <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
  239.     <dependency>
  240.       <groupId>commons-codec</groupId>
  241.       <artifactId>commons-codec</artifactId>
  242.       <version>1.9</version>
  243.     </dependency>
  244.  
  245.     <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
  246.     <dependency>
  247.       <groupId>com.alibaba</groupId>
  248.       <artifactId>fastjson</artifactId>
  249.       <version>1.2.47</version>
  250.     </dependency>
  251.  
  252.   </dependencies>
  253.  
  254.   <build>
  255.     <finalName>demo</finalName>
  256.     <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
  257.       <plugins>
  258.         <plugin>
  259.           <artifactId>maven-clean-plugin</artifactId>
  260.           <version>3.1.0</version>
  261.         </plugin>
  262.         <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
  263.         <plugin>
  264.           <artifactId>maven-resources-plugin</artifactId>
  265.           <version>3.0.2</version>
  266.         </plugin>
  267.         <plugin>
  268.           <artifactId>maven-compiler-plugin</artifactId>
  269.           <version>3.8.0</version>
  270.         </plugin>
  271.         <plugin>
  272.           <artifactId>maven-surefire-plugin</artifactId>
  273.           <version>2.22.1</version>
  274.         </plugin>
  275.         <plugin>
  276.           <artifactId>maven-war-plugin</artifactId>
  277.           <version>3.2.2</version>
  278.         </plugin>
  279.         <plugin>
  280.           <artifactId>maven-install-plugin</artifactId>
  281.           <version>2.5.2</version>
  282.         </plugin>
  283.         <plugin>
  284.           <artifactId>maven-deploy-plugin</artifactId>
  285.           <version>2.8.2</version>
  286.         </plugin>
  287.       </plugins>
  288.     </pluginManagement>
  289.   </build>
  290. </project>

在服务器端进行编码配置

现在我们开始编写UEController.java的代码，先写一个返回配置的方法：

  1. package com.blog.ueditor.controller;
  2.  
  3. import com.baidu.ueditor.ActionEnter;
  4. import org.springframework.stereotype.Controller;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  6.  
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. import java.io.IOException;
  10. import java.io.PrintWriter;
  11.  
  12. /**
  13.  *  UEditor富文本编辑器，后端控制器 
  14.  * @author 秋枫艳梦
  15.  * @date 2019-06-22
  16.  **/
  17. @Controller
  18. @RequestMapping(value = "/ueditor")
  19. public class UEController {
  20.  
  21.     /**
  22.      *  设置配置信息，供前端富文本编辑器检验是否可以使用IO流的操作
  23.      * @param request 请求体
  24.      * @param response 响应体
  25.      * */
  26.     @RequestMapping(value="/config")
  27.     public void config(HttpServletRequest request, HttpServletResponse response) {
  28.         response.setContentType("application/json");
  29.         String rootPath = request.getSession().getServletContext().getRealPath("/");
  30.  
  31.         PrintWriter writer = null;
  32.         try {
  33.             String exec = new ActionEnter(request, rootPath).exec();
  34.             writer = response.getWriter();
  35.             writer.write(exec);
  36.             writer.flush();
  37.             System.out.println("UEditor富文本编辑器后端配置完毕");
  38.         } catch (IOException e) {
  39.             e.printStackTrace();
  40.         }finally {
  41.             writer.close();
  42.         }
  43.     }
  44. }

在前端页面使用并配置UEditor编辑器

首先在home.html写下如下代码，唤起富文本编辑器(注意看引用的JS脚本)：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>UEditor编辑器教程</title>
  6.     <!--不要忘了引jQuery-->
  7.     <script src="../statics/js/jquery-3.2.1.min.js" type="text/javascript"></script>
  8.     <script src="../utf8-jsp/ueditor.config.js"></script>
  9.     <script src="../utf8-jsp/ueditor.all.min.js"></script>
  10.     <script src="../utf8-jsp/lang/zh-cn/zh-cn.js"></script>
  11. </head>
  12. <body>
  13. <div>
  14.     <textarea id="editor" style="width:100%;height:285px;"></textarea>
  15. </div>
  16. </body>
  17. <script>
  18.     $(function(){
  19.         //富文本编辑器
  20.         UE.getEditor('editor');
  21.     });
  22.  
  23. </script>
  24. </html>

然后在utf8-jsp下的ueditor.config.js中做出如下配置：

 现在我们先不做别的，运行一下项目，页面上已经有富文本编辑器了，而且后台也打印了消息：

现在我们已经可以欢快的使用了，也支持小表情，标题、段落、字体加粗、样式等功能，可以说已经是一个小型的word文档编辑器了，如果你的项目只是这些需求，那么你已经整合完毕了，接下来的操作可以忽略~~~

实现上传图片的功能(上传附件、文件等同理)

大部分的需求，还是要上传图片或者附件的，甚至视频、其他文件，这里只以上传图片为例，第一是因为这个场景最常见，第二是因为其他的场景跟这个是一样的，只不过做不同的配置，让服务器端不同的处理方法去执行业务即可。

首先我们继续编写UEController.java，增加一个上传图片的处理方法：

  1. /**
  2.      * 上传图片
  3.      * @param file 上传的图片
  4.      * @param request 请求体
  5.      * @return Map类型的响应结果
  6.      */
  7.     @ResponseBody
  8.     @RequestMapping(value = "/images", method = RequestMethod.POST)
  9.     public Map<String, Object> images(@RequestParam(value = "imageFile", required = false) MultipartFile file, HttpServletRequest request) {
  10.         Map<String, Object> params = new HashMap<String, Object>();
  11.         if (file == null) {
  12.             System.out.println("文件为空，方法结束");
  13.             return null;
  14.         }
  15.         try {
  16.             //为了简便，这里上传到桌面上的static文件夹
  17.             String basePath = "C:\\Users\\Administrator\\Desktop\\static";
  18.             
  19.             String ext = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1).toLowerCase();
  20.             String fileName = String.valueOf(System.currentTimeMillis()).concat("_").concat(String.valueOf(Math.random() * 1000) + 1000).concat(".").concat(ext);
  21.             StringBuilder sb = new StringBuilder();
  22.             //拼接保存路径
  23.             sb.append(basePath).append("\\").append(fileName);
  24.  
  25.             String visitUrl = "http://localhost/ue/upload/" + fileName;
  26.             File f = new File(sb.toString());
  27.             if (!f.exists()) {
  28.                 f.getParentFile().mkdirs();
  29.             }
  30.             OutputStream out = new FileOutputStream(f);
  31.             FileCopyUtils.copy(file.getInputStream(), out);
  32.             params.put("state", "SUCCESS");
  33.             params.put("url", visitUrl);
  34.             params.put("size", file.getSize());
  35.             params.put("original", fileName);
  36.             params.put("type", file.getContentType());
  37.             params.put("filename", file.getOriginalFilename());
  38.         } catch (Exception e) {
  39.             params.put("state", "ERROR");
  40.             e.printStackTrace();
  41.         }
  42.         return params;
  43.     }

然后，我们打开utf8-jsp下面的ueditor.config.js，做出如下配置：

注意：这里有坑，网上有说直接配置在config.json的，有说两个都要配置的，但博主亲测之后，发现只需要在ueditor.config.js配置即可，config.json可以说压根儿就没什么卵用(当然不能删除)，官方文档说是config.json的优先级较低，但是我ueditor.config.js不配置，应该读取config.json啊？实际上配置config.json并不会有效。

 其中，imageActionName属性，是action的名字，具体是干嘛用的，待会再说；imageFieldName是上传的图片的名字，即参数名，对应我们后端处理方法的@RequestParam所指定的value属性。

我们继续修改home.html，做出如下修改：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>UEditor编辑器教程</title>
  6.     <!--不要忘了引jQuery-->
  7.     <script src="../statics/js/jquery-3.2.1.min.js" type="text/javascript"></script>
  8.     <script src="../utf8-jsp/ueditor.config.js"></script>
  9.     <script src="../utf8-jsp/ueditor.all.min.js"></script>
  10.     <script src="../utf8-jsp/lang/zh-cn/zh-cn.js"></script>
  11. </head>
  12. <body>
  13. <div>
  14.     <textarea id="editor" style="width:100%;height:285px;"></textarea>
  15. </div>
  16. </body>
  17. <script>
  18.     $(function(){
  19.         //富文本编辑器
  20.         UE.getEditor('editor');
  21.  
  22.         UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
  23.         UE.Editor.prototype.getActionUrl = function(action){
  24.             if(action == 'action-image'){
  25.                 return 'http://localhost/ueditor/images';
  26.             }else{
  27.                 return this._bkGetActionUrl.call(this,action);
  28.             }
  29.         }
  30.     });
  31.  
  32. </script>
  33. </html>

我们知道，UEditor可以在工具栏指定好多功能，上传图片、附件、文件等待，那它怎样区分这些操作呢？UE的研发团队以不同的action来区分，我们指定了上传图片的action为“action-image”，那么就要在用户使用这个功能时返回一个路径，这个路径就是处理这个action的，这里也就是我们后台上传图片的控制器的路径，这下子理解了吧？

所以，如果你想上传附件、文件、视频等等，在config.json配置对应的模块，然后在home.html做不同的action判断，分发给不同的后端服务器去处理即可。

运行项目，我们可以看到static文件夹下已经有上传的图片了，只是富文本编辑器没有回显图片：

 

 这是为什么呢？F12调试一下，发现富文本框明明有图片路径啊？

这是因为，我们的文件夹写在了tomcat服务器外部，这也是我们经常做的做法，否则服务器目录会愈发臃肿，所以我们需要做一下虚拟路径的映射，在tomcat的server.xml中配置：

 另外，在IDEA中调试的话，还需要勾选这一项：

OK，重新运行一下：

 已经达到我们想要的效果了，在项目中实际应用的话，再加一个提交事件，获取富文本框的内容，入库，不就完事了？？？

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/936934
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号