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路径,如果读取不到这个文件，后面基本GG
	private 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.再次测试：成功！！！

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