UEditor之——与SpringMVC整合
来源：互联网 发布：iphone主题软件下载 编辑：程序博客网 时间：2024/05/21 22:27
转载请注明出处：http://blog.csdn.net/l1028386804/article/details/52389722
一、引言
相信大家做项目时，很多时候都会用到富文本编辑器。今天是2016年8月的最后一天，那么就给大家带来一篇关于JSP UEditor整合SpringMVC的文章吧，UEditor是百度的一款富文本编辑器产品，网址为：http://ueditor.baidu.com/website/ ， 但是直接使用Editor时，会将编辑的图片直接上传到服务器的项目所在路径，如果每次部署项目的时候，都是全量部署(删除服务器上原有项目，重新部署)，则之前上传的图片都会清空，所以，一般情况下，我们最好是将图片上传到服务器上某个单独的目录下，这样，即使我们全量部署项目，之前上传的图片也就不会丢失了。好，那我们一起来看如何将Editor整合，并将图片保存到单独的目录下。
二、准备
这里我们用的UEditor的版本是1.4.3.3 下载地址为：http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp
三、实战
1、新建项目，导入UEditor
这里，我们新建Maven工程ueditor，将下载的UEditor解压后重命名为ueditor，并将文件夹拷贝到webapp/static目录下，如下图所示：
2、导入jar包
如图：
3、编辑pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.lyz</groupId> <artifactId>lyz</artifactId> <version>1.0.0-SNAPSHOT</version> <packaging>war</packaging> <properties> <spring.version>4.0.5.RELEASE</spring.version> <hibernate.version>4.3.5.Final</hibernate.version> </properties> <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${spring.version}</version> </dependency> <!-- hibernate --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>${hibernate.version}</version> </dependency> <!-- 配置HttpClient --> <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> <version>1.1.1</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.4</version> </dependency> <!-- <dependency> <groupId>commons-httpclient</groupId> <artifactId>commons-httpclient</artifactId> <version>3.0.1</version> </dependency> --> <!-- Java EE --> <dependency> <groupId>javax.persistence</groupId> <artifactId>persistence-api</artifactId> <version>1.0</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.0.1</version> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.0.5</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.30</version> </dependency> <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> <version>17.0</version> </dependency> <dependency> <groupId>net.sf.ezmorph</groupId> <artifactId>ezmorph</artifactId> <version>1.0.6</version> <type>jar</type> <scope>compile</scope> </dependency> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.2.3</version> <classifier>jdk15</classifier> </dependency> <dependency> <groupId>com.thoughtworks.xstream</groupId> <artifactId>xstream</artifactId> <version>1.4.4</version> </dependency> <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-classic</artifactId> <version>1.0.13</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-mapper-asl</artifactId> <version>1.9.13</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-core-asl</artifactId> <version>1.9.13</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.2</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.esotericsoftware.reflectasm</groupId> <artifactId>reflectasm</artifactId> <version>1.09</version> </dependency><dependency> <groupId>xmlpull</groupId> <artifactId>xmlpull</artifactId> <version>1.1.3.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>xpp3</groupId> <artifactId>xpp3</artifactId> <version>1.1.4c</version> <scope>provided</scope> </dependency> <dependency> <groupId>com.thoughtworks.xstream</groupId> <artifactId>xstream</artifactId> <version>1.4.7</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.7</version> </dependency> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.1.2</version> </dependency> <dependency> <groupId>cglib</groupId> <artifactId>cglib-nodep</artifactId> <version>2.1_3</version> </dependency> <dependency> <groupId>commons-pool</groupId> <artifactId>commons-pool</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.6.0</version> </dependency> <!-- quartz --> <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.2.1</version> </dependency> <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz-jobs</artifactId> <version>2.2.1</version> </dependency> <!-- joda time --> <dependency> <groupId>joda-time</groupId> <artifactId>joda-time</artifactId> <version>2.4</version> </dependency> <dependency><groupId>xml-apis</groupId><artifactId>xml-apis</artifactId><version>1.4.01</version></dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>fluent-hc</artifactId> <version>4.3.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <version>4.3.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient-cache</artifactId> <version>4.3.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpcore</artifactId> <version>4.3.2</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpmime</artifactId> <version>4.3.5</version> <scope>provided</scope> </dependency> <dependency><groupId>org.json</groupId><artifactId>json</artifactId><version>20140107</version></dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-simple</artifactId> <version>1.6.1</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.6.1</version> </dependency> <dependency> <groupId>commons-pool</groupId> <artifactId>commons-pool</artifactId> <version>1.5.6</version> </dependency> <dependency> <groupId>codec</groupId> <artifactId>codec</artifactId> <version>1.0</version> <scope>system</scope> <systemPath>${project.basedir}/lib/commons-codec-1.9.jar</systemPath> </dependency> <dependency> <groupId>fileupload</groupId> <artifactId>fileupload</artifactId> <version>1.3.1</version> <scope>system</scope> <systemPath>${project.basedir}/lib/commons-fileupload-1.3.1.jar</systemPath> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> <scope>system</scope> <systemPath>${project.basedir}/lib/commons-io-2.4.jar</systemPath> </dependency> <dependency> <groupId>json</groupId> <artifactId>json</artifactId> <version>1.0</version> <scope>system</scope> <systemPath>${project.basedir}/lib/json.jar</systemPath> </dependency> <dependency> <groupId>ueditor</groupId> <artifactId>ueditor</artifactId> <version>1.1.2</version> <scope>system</scope> <systemPath>${project.basedir}/lib/ueditor-1.1.2.jar</systemPath> </dependency> </dependencies> <build> <finalName>lyz</finalName> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.1</version> <configuration> <source>1.7</source> <target>1.7</target> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-plugin</artifactId> <version>2.4</version> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-eclipse-plugin</artifactId> <configuration> <wtpmanifest>true</wtpmanifest> <wtpapplicationxml>true</wtpapplicationxml> <wtpversion>2.0</wtpversion> </configuration> </plugin> </plugins> </build></project>4、设置web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>lyz</display-name> <!-- 配置spring监听器 --><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><!-- 加载配置文件路径 --><context-param><param-name>contextConfigLocation</param-name><param-value>classpath*:applicationContext*.xml</param-value></context-param><!-- springmvc配置 --><servlet><servlet-name>lyz</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:lyz-servlet*.xml</param-value> </init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>lyz</servlet-name><url-pattern>/</url-pattern></servlet-mapping><!-- 配置OpenSessionInView --><filter> <filter-name>hibernateFilter</filter-name> <filter-class>org.springframework.orm.hibernate4.support.OpenSessionInViewFilter</filter-class> <!-- singleSession默认为true,若设为false则等于没用OpenSessionInView --> <init-param> <param-name>singleSession</param-name> <param-value>true</param-value> </init-param> </filter><filter-mapping><filter-name>hibernateFilter</filter-name><url-pattern>/*</url-pattern> </filter-mapping> <filter> <filter-name>CorsFilter</filter-name> <filter-class>com.lyz.utils.cors.filter.CorsFilter</filter-class></filter><filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern></filter-mapping><!-- 字符编码过滤器 --> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> </web-app>
5、新建applicationContext.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:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:cache="http://www.springframework.org/schema/cache" 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/tx http://www.springframework.org/schema/tx/spring-tx-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/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsdhttp://www.springframework.org/schema/cache http://www.springframework.org/schema/cache/spring-cache-4.0.xsd"> <!-- 扫描项目包的根路径 --> <context:component-scan base-package="com.lyz" /> <!-- database connection pool configuration --> <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close"> <!-- 基本属性 url、user、password --> <!-- 原配置 --> <property name="url" value="jdbc:mysql://127.0.0.1:3306/shop?characterEncoding=utf8" /> <property name="username" value="root" /> <property name="password" value="root" /> <!-- 配置初始化大小、最小、最大 --> <property name="initialSize" value="1" /> <property name="minIdle" value="1" /> <property name="maxActive" value="20" /> <!-- 配置获取连接等待超时的时间 --> <property name="maxWait" value="60000" /> <!-- 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒 --> <property name="timeBetweenEvictionRunsMillis" value="60000" /> <!-- 配置一个连接在池中最小生存的时间，单位是毫秒 --> <property name="minEvictableIdleTimeMillis" value="300000" /> <property name="validationQuery" value="SELECT 'x'" /> <property name="testWhileIdle" value="true" /> <property name="testOnBorrow" value="false" /> <property name="testOnReturn" value="false" /> <!-- 打开PSCache，并且指定每个连接上PSCache的大小 --> <property name="poolPreparedStatements" value="false" /> <property name="maxPoolPreparedStatementPerConnectionSize" value="20" /> <!-- 配置监控统计拦截的filters --> <property name="filters" value="stat" /> </bean><!-- 配置sessionFactory --> <bean id="sessionFactory" class="org.springframework.orm.hibernate4.LocalSessionFactoryBean"> <property name="dataSource" ref="dataSource" /> <property name="packagesToScan" value="com.lyz.**.entity"></property> <property name="hibernateProperties"> <props> <prop key="javax.persistence.validation.mode">none</prop> <prop key="hibernate.dialect">org.hibernate.dialect.MySQL5InnoDBDialect</prop> <prop key="hibernate.show_sql">true</prop> <prop key="hibernate.format_sql">true</prop> </props> </property> </bean> <!-- 配置spring声明式事物管理 --> <bean id="transactionManager" class="org.springframework.orm.hibernate4.HibernateTransactionManager"> <property name="dataSource" ref="dataSource" /> <property name="sessionFactory" ref="sessionFactory" /> </bean> <!-- 配置注解驱动 --> <tx:annotation-driven transaction-manager="transactionManager" /> <!-- 配置spring声明式事物管理:第二种方式：基于xml --> <!-- 配置事务切入点，局限方法名（采用XML方法配置） --> <tx:advice id="advice" transaction-manager="transactionManager"> <tx:attributes> <!-- 配置那些方法需要切入什么事务类型 --> <tx:method name="save*" propagation="REQUIRED" rollback-for="java.lang.Exception"/> <tx:method name="delete*" propagation="REQUIRED" rollback-for="java.lang.Exception"/> <tx:method name="update*" propagation="REQUIRED" rollback-for="java.lang.Exception"/> <tx:method name="remove*" propagation="REQUIRED" rollback-for="java.lang.Exception"/> <tx:method name="add*" propagation="REQUIRED" rollback-for="java.lang.Exception"/> <tx:method name="*" propagation="SUPPORTS"/> </tx:attributes> </tx:advice> <!-- 上面只配置了方法的事务类型，并没有配置向哪些类（对象）切入 --> <!-- 关联切入表达式 --> <aop:config> <aop:advisor advice-ref="advice" pointcut="execution(* com.lyz.**.service.*.*(..))"/> <aop:advisor advice-ref="advice" pointcut="execution(* com.lyz.**.service.impl.*.*(..))"/> </aop:config></beans>
6、新建applications.properties
这个文件主要用来设置一些配置信息，比如图片访问路径，上传路径等，具体如下所示：
lyz.uploading.url=d:/lyz/staticlyz.visit.url=/upload/lyz.resource.url=http://127.0.0.1:8099
7、配置log4j
#\u8F93\u51FA\u5230\u63A7\u5236\u53F0log4j.appender.stout=org.apache.log4j.ConsoleAppenderlog4j.appender.stout.layout=org.apache.log4j.PatternLayoutlog4j.appender.stout.layout.ConversionPattern=[%p]%d{yyyy-MM-dd HH:mm:ss} %l: %m%n#log4j.appender.stout.layout.ConversionPattern=[%p]%d{yyyy-MM-dd HH:mm:ss}: %m%n#\u8F93\u51FA\u5230\u6587\u4EF6log4j.appender.fout=org.apache.log4j.FileAppenderlog4j.appender.fout.file=d:/Tomcat_Project/logs/wine.log#log4j.appender.fout.file=/opt/apache-tomcat-7.0.56/logs/wine.loglog4j.appender.fout.layout=org.apache.log4j.PatternLayoutlog4j.appender.fout.layout.ConversionPattern=[%p]%d{yyyy-MM-dd HH:mm:ss} %l: %m%n#log4j.appender.stout.layout.ConversionPattern=[%p]%d{yyyy-MM-dd HH:mm:ss}: %m%n#\u8F93\u51FA\u7EA7\u522Blog4j.rootLogger=INFO, stout8、配置lyz-servlet
<?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:beans="http://www.springframework.org/schema/beans"xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd 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-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd"><!-- <mvc:resources mapping="/resources/**" location="/resources/" /> --><mvc:resources mapping="/static/**" location="/static/" /><mvc:annotation-driven /> <context:component-scan base-package="com.lyz.**.controller"/> <!-- Map simple view name such as "test" into /WEB-INF/test.jsp --><beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/jsp/" /><property name="suffix" value=".jsp" /></bean><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></beans>
9、建立实体类Shop
创建实体类主要的目的是方便运行整个项目框架，具体如下：
package com.lyz.entity;import java.io.Serializable;import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;import javax.persistence.Table;/** * 实体类shop * @author liuyazhuang * */@Entity@Table(name="c_shop")public class Shop implements Serializable {private static final long serialVersionUID = -6980546472329430674L;@Id @Column(name="id") @GeneratedValue(strategy=GenerationType.IDENTITY)private Long id;public Shop() {super();}public Shop(Long id) {super();this.id = id;}public Long getId() {return id;}public void setId(Long id) {this.id = id;}@Overridepublic String toString() {return "Shop [id=" + id + "]";}}10、创建读取properties文件的工具类LoadPropertiesDataUtils
package com.lyz.utils;import java.io.IOException;import java.io.InputStream;import java.util.Properties;/** * 加载Properties文件数据的工具类 * @author liuyazhuang * */public final class LoadPropertiesDataUtils{private volatile static Properties mProperties; static{mProperties = new Properties();InputStream in = LoadPropertiesDataUtils.class.getResourceAsStream("/applications.properties");try{mProperties.load(in);} catch (IOException e){e.printStackTrace();}}public static String getValue(String key){if(mProperties == null) return "";return mProperties.getProperty(key, "");}}11、创建随机数工具类
这个类的主要作用是生成指定位数的随机数，具体如下所示：
package com.lyz.utils;import java.util.Random;/** * 随机数工具类 * @author liuyazhuang * */public final class RandomUtils {/** * 获取指定位数的随机数 * @param num * @return */public static String getRandom(int num){Random random = new Random();StringBuilder sb = new StringBuilder();for(int i = 0;i < num; i++){sb.append(String.valueOf(random.nextInt(10)));}return sb.toString();}}12、创建字符串工具类StringUtils
package com.lyz.utils;/** * 字符串工具类 * @author liuyazhuang * */public final class StringUtils {/** * 判断字符串是否为空 * @param str * @return */public static boolean isEmpty(String str){return (str == null || "".equals(str.trim()));}/** * 获取名称后缀 * @param name * @return */public static String getExt(String name){if(name == null || "".equals(name) || !name.contains("."))return "";return name.substring(name.lastIndexOf(".")+1);}}13、创建解决跨域的类CorsFilter
package com.lyz.utils.cors.filter;import java.io.IOException;import javax.servlet.FilterChain;import javax.servlet.ServletException;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.web.filter.OncePerRequestFilter;/** * 解决跨域 * @author liuyazhuang * */public class CorsFilter extends OncePerRequestFilter { @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { response.addHeader("Access-Control-Allow-Origin", "*"); response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); response.addHeader("Access-Control-Allow-Headers", "origin, content-type, accept, x-requested-with, sid, mycustom, smuser"); filterChain.doFilter(request, response); }}14、创建跳转到首页的控制器类IndexController
package com.lyz.controller;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;/** * 首页controller，主要的功能是跳转到首页 * @author liuyazhuang * */@Controller@RequestMapping(value="/index")public class IndexController {/** * 跳转到首页 * @param request * @param response */@RequestMapping(value="/page", method = RequestMethod.GET)public String page(HttpServletRequest request, HttpServletResponse response){return "/index";}}15、创建上传文件的类UploadImageController
package com.lyz.controller;import java.io.File;import java.io.FileOutputStream;import java.io.OutputStream;import java.util.HashMap;import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;import org.springframework.util.FileCopyUtils;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import com.lyz.utils.LoadPropertiesDataUtils;import com.lyz.utils.RandomUtils;import com.lyz.utils.StringUtils;/** * 上传图片的controller * @author liuyazhuang * */@Controller@RequestMapping(value="/resource/upload")public class UploadImageController {/** * 上传图片 * @param file * @param request * @param response * @return */@ResponseBody@RequestMapping(value="/images")public Map<String, Object> images (MultipartFile upfile, HttpServletRequest request, HttpServletResponse response){Map<String, Object> params = new HashMap<String, Object>();try{ String basePath = LoadPropertiesDataUtils.getValue("lyz.uploading.url"); String visitUrl = LoadPropertiesDataUtils.getValue("lyz.visit.url"); if(basePath == null || "".equals(basePath)){ basePath = "d:/lyz/static"; //与properties文件中lyz.uploading.url相同，未读取到文件数据时为basePath赋默认值 } if(visitUrl == null || "".equals(visitUrl)){ visitUrl = "/upload/"; //与properties文件中lyz.visit.url相同，未读取到文件数据时为visitUrl赋默认值 } String ext = StringUtils.getExt(upfile.getOriginalFilename()); String fileName = String.valueOf(System.currentTimeMillis()).concat("_").concat(RandomUtils.getRandom(6)).concat(".").concat(ext); StringBuilder sb = new StringBuilder(); //拼接保存路径 sb.append(basePath).append("/").append(fileName); visitUrl = visitUrl.concat(fileName); File f = new File(sb.toString()); if(!f.exists()){ f.getParentFile().mkdirs(); } OutputStream out = new FileOutputStream(f); FileCopyUtils.copy(upfile.getInputStream(), out); params.put("state", "SUCCESS"); params.put("url", visitUrl); params.put("size", upfile.getSize()); params.put("original", fileName); params.put("type", upfile.getContentType());} catch (Exception e){ params.put("state", "ERROR");} return params;}}16、引入jquery
我们在webapp/static目录下创建lib目录，然后将jquery导入到lib目录下，如下图所示：
17、创建index.jsp
在webapp/WEB_INF/jsp目录下创建index.jsp，具体如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>UEditor</title><script type="text/javascript">var basePath = "<%=basePath%>";</script><script type="text/javascript" src="../static/lib/jquery-1.12.0.min.js"></script><script type="text/javascript" src="../static/ueditor/ueditor.config.js"></script><script type="text/javascript" src="../static/ueditor/ueditor.all.js"></script><script type="text/javascript" src="../static/ueditor/lang/zh-cn/zh-cn.js"></script><script type="text/javascript" src="../static/index/index.js"></script></head><body><div><textarea id="myEditor"></textarea></div></body></html>由上述代码可知，我们再index.jsp中主要定义了一个textarea标签。
18、创建index.js文件
我们在webapp/static目录下创建index文件夹，并在index文件夹中创建index.js，主要内容如下：
$(function(){//富文本编辑器UE.getEditor('myEditor')UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action){if(action == '/resource/upload/images'){return basePath+'resource/upload/images';}else{return this._bkGetActionUrl.call(this, action);}}});19、编辑UEditor的config.json文件
编辑后的文件如下图所示：
/* 前后端通信相关的配置,注释只允许使用多行方式 */{ /* 上传图片配置项 */ "imageActionName": "/resource/upload/images", /* 执行上传图片的action名称 */ "imageFieldName": "upfile", /* 提交的图片表单名称 */ "imageMaxSize": 2048000, /* 上传大小限制，单位B */ "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */ "imageCompressEnable": true, /* 是否压缩图片,默认是true */ "imageCompressBorder": 1600, /* 图片压缩最长边限制 */ "imageInsertAlign": "none", /* 插入的图片浮动方式 */ "imageUrlPrefix": "http://127.0.0.1:8099", /* 图片访问路径前缀 */ "imagePathFormat": "/upload/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */ /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */ /* {time} 会替换成时间戳 */ /* {yyyy} 会替换成四位年份 */ /* {yy} 会替换成两位年份 */ /* {mm} 会替换成两位月份 */ /* {dd} 会替换成两位日期 */ /* {hh} 会替换成两位小时 */ /* {ii} 会替换成两位分钟 */ /* {ss} 会替换成两位秒 */ /* 非法字符 \ : * ? " < > | */ /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */ /* 涂鸦图片上传配置项 */ "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */ "scrawlFieldName": "upfile", /* 提交的图片表单名称 */ "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "scrawlMaxSize": 2048000, /* 上传大小限制，单位B */ "scrawlUrlPrefix": "", /* 图片访问路径前缀 */ "scrawlInsertAlign": "none", /* 截图工具上传 */ "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */ "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */ "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */ /* 抓取远程图片配置 */ "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */ "catcherFieldName": "source", /* 提交的图片列表表单名称 */ "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "catcherUrlPrefix": "", /* 图片访问路径前缀 */ "catcherMaxSize": 2048000, /* 上传大小限制，单位B */ "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */ /* 上传视频配置 */ "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */ "videoFieldName": "upfile", /* 提交的视频表单名称 */ "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "videoUrlPrefix": "", /* 视频访问路径前缀 */ "videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */ "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */ /* 上传文件配置 */ "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */ "fileFieldName": "upfile", /* 提交的文件表单名称 */ "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "fileUrlPrefix": "", /* 文件访问路径前缀 */ "fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */ "fileAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ], /* 上传文件格式显示 */ /* 列出指定目录下的图片 */ "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */ "imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出图片的目录 */ "imageManagerListSize": 20, /* 每次列出文件数量 */ "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */ "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */ "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */ /* 列出指定目录下的文件 */ "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */ "fileManagerListPath": "/ueditor/jsp/upload/file/", /* 指定要列出文件的目录 */ "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */ "fileManagerListSize": 20, /* 每次列出文件数量 */ "fileManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ] /* 列出的文件类型 */}此文件中imageActionName名称的配置与index.js中的判断条件中的配置保持一致，如下图：
imageUrlPrefix为图片访问前缀。
20、配置tomcat server.xml文件
由于我们将图片放到了项目外面，独立于tomcat，所以我们要在tomcat的server.xml文件中设置虚拟路径，如下在<Host></Host>节点中添加如下代码：
<Context docBase="d:/lyz/static" path="/upload" reloadable="true"/>此处的docBase与applications.properties文件中的lyz.uploading.url一致，path与applications.properties文件中的lyz.visit.url一致。
如下图所示：
至此，我们完成了整个项目的开发，下面我们来运行这个项目
四、运行测试
我们将项目发布到tomcat,在浏览器地址栏输入http://127.0.0.1:8099/ueditor/index/page,原因是我将tomcat端口设置为8099,
此时，查看我的图片保存路径d:/lyz/static
没有任何图片。那现在我们编辑图片吧。如下图，我在UEditor中编辑了一张图片：
我们再打开d:/lyz/static目录：
图片已经上传到我们的指定的配置目录中了。
至此整个工程创建运行结束。
五、附录
大家可以到链接http://download.csdn.net/detail/l1028386804/9618375下载基于Maven的SpringMVC整合UEditor(可单独配置上传路径 )的完整实例源码
6 0
- UEditor之——与SpringMVC整合
- UEditor之——与SpringMVC整合
- springmvc与百度Ueditor整合
- 百度编辑器ueditor与springmvc项目整合
- ueditor编辑器与springmvc整合使用
- springMVC与百度UEditor的整合
- springMVC 整合ueditor
- SpringMVC+Ueditor 整合
- ueditor+freemarker+springmvc整合
- ueditor 整合 springmvc
- springMVC整合UEditor
- SpringMVC整合UEditor
- ueditor与struts2整合之图片上传
- SpringMVC之Web-整合ueditor编辑器（九）
- SpringMVC 整合 百度编辑器UEditor
- springMVC系列之与spring的整合——07
- Spring+SpringMVC+MyBatis+easyUI整合优化篇（六）easyUI与富文本编辑器UEditor整合
- ueditor与ssh整合之上传图片篇
- 安装react-native命令和创建
- Java - static静态什么时候使用
- hdu 1561 The more, The Better（树形DP）
- 递归两个例子
- 智力竞赛（慢慢领悟dp）
- UEditor之——与SpringMVC整合
- 关于Single Number II的一些讨论
- c++ 模板类 声明和定义都放在.h文件的原因
- windows下文件共享以及通过网线在两台Windows电脑之间传数据
- Task schedule
- Linux--网络基础
- tjut 3948
- 10+ 最佳的 Node.js 教程和实例
- LeetCode-TwoSum
