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

最新推荐文章于 2024-11-21 11:58:57 发布

Java开发之旅

最新推荐文章于 2024-11-21 11:58:57 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：企业级开发框架文章标签： UEditor教程 Java Web富文本编辑器富文本编辑器教程 Spring整合UE SSM项目富文本

本文链接：https://blog.youkuaiyun.com/wzy18210825916/article/details/93178819

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

前戏

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

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

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

创建项目

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

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

PageController.java：

package com.blog.ueditor.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 *  页面转发器
 * @author 秋枫艳梦
 * @date 2019-06-21
 * */
@Controller
public class PageController {

    /**
     *  跳到富文本编辑页面
     * @return 视图名称
     *
     * */
    @RequestMapping(value = "/home.html")
    public String goHome(){
        return "home";
    }
}

application-context.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:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
">
    <context:component-scan base-package="com.blog.ueditor.controller"/>
    <context:annotation-config />
</beans>

application-servlet.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:mvc="http://www.springframework.org/schema/mvc"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
">
    <import resource="application-context.xml"/>  <!--引入另一篇配置文件-->
    <mvc:resources mapping="/statics/**" location="/statics/"/>


    <!--完成请求与处理器之间的映射，并处理JSON数据格式的转码-->
    <mvc:annotation-driven>
        <mvc:message-converters>
            <!--处理时间格式-->
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>text/html;charset=UTF-8</value>
                        <value>application/json;charset=UTF-8</value>
                    </list>
                </property>
                <property name="features">
                    <list>
                        <value>WriteDateUseDateFormat</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>


    <!--配置视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

    <!-- html视图解析器 --> <!-- 必须先配置freemarkerConfig,注意html是没有prefix前缀属性的 -->
    <bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
        <property name="templateLoaderPath">
            <value>/html/</value>
        </property>
        <property name="freemarkerSettings">
            <props>
                <prop key="default_encoding">UTF-8</prop>
            </props>
        </property>
    </bean>
    <bean id="htmlviewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
        <property name="suffix" value=".html"/>
        <property name="order" value="0"/>
        <property name="contentType" value="text/html;charset=UTF-8"/>
    </bean>


    <!--配置MultipartResolver，上传文件-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="5000000"/>
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>
</beans>

web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
  <display-name>Archetype Created Web Application</display-name>

  
  <!--定义核心Servlet,MVC的入口