SpringMVC之Web-整合ueditor编辑器（九）

1.整合的意义：

   在web开发中, 富文本的编辑器真心很重要. 有电商店铺的打理, 新闻稿/博客文章/论坛帖子的编辑等等, 这种所见即所的编辑方式, 大大方便了非技术人员从事互利网相关的工作。

2.整合的版本列表：

   spring4.0.2

   mybatis3.2.6

   ueditor1_4_3_3-src【源码】地址：http://ueditor.baidu.com/website/download.html

   ueditor1_4_3_3-utf8-jsp【静态资源】http://ueditor.baidu.com/website/download.html

3.整合所需要的Maven依赖（也可以用源码包自带的jar包）：【注意：不要引入ueditor-X.X.X.jar】

<!-- 上传组件包 -->          <dependency>              <groupId>commons-fileupload</groupId>              <artifactId>commons-fileupload</artifactId>              <version>1.3.1</version>          </dependency>          <dependency>              <groupId>commons-io</groupId>              <artifactId>commons-io</artifactId>              <version>2.4</version>          </dependency>          <dependency>              <groupId>commons-codec</groupId>              <artifactId>commons-codec</artifactId>              <version>1.9</version>          </dependency>        <dependency>            <groupId>org.json</groupId>            <artifactId>json</artifactId>            <version>20140107</version>        </dependency>

4.把源码【jsp版】和【ueditor文件夹】静态资源丢进去项目里面；spring-mvc.xml配置文件加上：

<mvc:resources location="/ueditor/" mapping="/ueditor/**"/>

5.项目结构图如下：

6.所需要修改的文件：

   1.ConfigManager.class，

   2.ueditor目录下的ueditor.config.js，

   3.ueditor/jsp目录下的config.json文件

7.添加controller处理类，【用于代替统一入口controller.jsp文件（和congfig.json文件放在一起的）】代码如下：

package com.cha.controller;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import com.baidu.ueditor.ActionEnter;@Controller  @RequestMapping(value = "/ueditor")  public class UEditorController {            @RequestMapping("/dispatch")          public void config(HttpServletRequest request,  HttpServletResponse response, String action) {                  response.setContentType("application/json");                                 String rootPath = request.getSession().getServletContext().getRealPath("/");                  try {                          String exec = new ActionEnter(request, rootPath).exec();                          PrintWriter writer = response.getWriter();                          writer.write(exec);                          writer.flush();                          writer.close();                  } catch (IOException e) {                          e.printStackTrace();                  }               }  }

8.修改ConfigManager.class里面的private String getConfigPath ()方法；【和我截图那里的路径要对应一致】

//private String getConfigPath () {//return this.parentPath + File.separator + ConfigManager.configFileName;//}//获取config.json路径,如果读取不到这个文件，后面基本GGprivate String getConfigPath () {    return this.rootPath            + File.separator + "ueditor"            + File.separator +"jsp" + File.separator + ConfigManager.configFileName;}

9.修改ueditor.config.js，

   1.tip：打印alert（URL）就可以知道当前的路径是否拼接正确了，

   2.有的可能是这种情况的：serverUrl:URL+"/ueditor/dispatch.action";

   3.请求后缀action，do这些最好加上，如果web.xml文件里面有设置请求后缀限制的话，不然请求不到【被坑过】

/**     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。     */    window.UEDITOR_CONFIG = {        //为编辑器实例添加一个路径，这个不能被注释        UEDITOR_HOME_URL: URL        // 服务器统一请求接口路径        //, serverUrl: URL + "jsp/controller.jsp"        //, serverUrl: serverURL + "/ueditor/dispatch"        //修改后的路径dispatch.action是刚刚添加的那个controller处理类的访问方法，后面运行都要用到这个统一入口的        , serverUrl: URL + "/dispatch.action"

10.修改config.json文件

   1.修改imageUlrPrefix参数，http://127.0.0.1:8888/z【就是你项目运行的IP地址or域名地址+项目名称】；

   2.修改imagePathFormat参数，你存放图片的地址；

/* 上传图片配置项 */    "imageActionName": "uploadimage", /* 执行上传图片的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:8888/z", /* 图片访问路径前缀 */    "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

11.测试ftl：

<html><body><script src="/z/ueditor/ueditor.config.js"></script><script src="/z/ueditor/ueditor.all.min.js"></script><script src="/z/ueditor/lang/zh-cn/zh-cn.js"></script><!--<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>--><script type="text/javascript">   var editor = UE.getEditor('container');</script><div>       <textarea id="container" name="content">xxxx</textarea>  </div>

12结果：显示ok，

13.上传图片：未找到上传数据，

     原因：1.这是因为ueditor本身的文件上传和SpringMVC配置的文件上传有冲突导致的，

                2.把spring-mvc.xml里面的文件上传的配置注释掉就行了。

14.再次测试：成功！！！

结语：现在整合的上传的图片是放在项目根目录的，重新跑项目的时候被会被删掉，还有文件上传配置冲突那一块解决的还不够好，后续改进，溜了溜了。