SSM整合项目中使用百度Ueditor遇到的问题。

问题描述：无法上传图片，提示配置项加载有问题

大致情形：直接下载的ue编辑器，放在了/resources/   目录下，也就是静态资源路径，然后更改web.xml，将tomcat默认拦截器配置放到所有servlet的最上面

    <!-- 不拦截静态文件 -->  
    <servlet-mapping>  
        <servlet-name>default</servlet-name>  
        <url-pattern>/resources/*</url-pattern>  
    </servlet-mapping>  

可即使是这样，打开demo界面，点图片上传，提示后端配置未正常加载，手动输入百度ue的controller.jsp地址时却输出的是controller.jsp的源码，不放弃，继续：

查看官方文档得知默认会访问controller.jsp是因为如下配置项（ps:图是改过后的，非默认配置），既然这样，那咱们就自己定义个controller，把controller.jsp的代码copy到自己的controller里面，然后更改图中配置项来处理ue的请求：

说做就做：

package **********************************;

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.RequestParam;

import com.baidu.ueditor.ActionEnter;

@Controller
@RequestMapping("/ueditor")
public class UeditorController {

    @RequestMapping("/upload")
    public void exec(@RequestParam(value="action",required=false)String action,
            @RequestParam(value="callback",required=false)String callback,
            HttpServletRequest req, HttpServletResponse res) {
        try {
            req.setCharacterEncoding("utf-8");
            res.setHeader("Content-Type", "text/html");
            String rootPath =req.getSession().getServletContext().getRealPath("/");
            res.getWriter().write(new ActionEnter(req, rootPath,"").exec());
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

这下应该可以了吧，no,no,no,还是提示后端服务为正常加载，debug模式走起，原来百度ue有个小问题，归纳起来如下：

首先肯定要加载所有配置，java语言的配置是在config.json中配置的，然后引申出另一个问题，如何获取config.json的真实路径，

原来百度的大神们是这样做的：假设你们可以访问到ue的初始页面，也就是可以看到编辑框，那么ue在编辑框初始化的时候就发个询问后端配置是否正常的get请求，就是ueditor.config.js中配置的serverUrl，然后加个参数 ?action=config，代码里最后走这行代码：

res.getWriter().write(new ActionEnter(req, rootPath,"").exec());

rootpath是项目的真实物理路径，而后用request.getRequestURI获取访问路径，两者加到一起，就获取到了config.json文件所在路径的文件夹（假设还是访问的controller.jsp，那么是没问题的.ps:一改问题就多。。。）,这样就可以加载config.json文件中的所有配置了。然而spring mvc可随意定义url路径，所以，这样做就有问题了，所以就出了上面那个配置项有问题无法上传的提示了。那怎么解决呢？在我走了一段弯路之后怒了，大爷的不就是要加载config.json吗？何必绕那么大的圈子，我直接给你不就完了？于是乎,下载ue的jar包源码，更改ActionEnter的构造方法，将路径传过去，最后的ActionEnter如下：

package com.baidu.ueditor;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import com.baidu.ueditor.define.ActionMap;
import com.baidu.ueditor.define.AppInfo;
import com.baidu.ueditor.define.BaseState;
import com.baidu.ueditor.define.State;
import com.baidu.ueditor.hunter.FileManager;
import com.baidu.ueditor.hunter.ImageHunter;
import com.baidu.ueditor.upload.Uploader;

public class ActionEnter {
    
    private HttpServletRequest request = null;
    
    private String rootPath = null;
    private String contextPath = null;
    
    private String actionType = null;
    
    private ConfigManager configManager = null;

    public ActionEnter ( HttpServletRequest request, String rootPath,String jsonFilePath ) {
        
        this.request = request;
        this.rootPath = rootPath;
        this.actionType = request.getParameter( "action" );
        this.contextPath = request.getContextPath();
        this.configManager = ConfigManager.getInstance( this.rootPath,jsonFilePath, this.contextPath, request.getRequestURI().replace(request.getContextPath(),"") );
        
    }
    
    public String exec () {
        
        String callbackName = this.request.getParameter("callback");
        
        if ( callbackName != null ) {

            if ( !validCallbackName( callbackName ) ) {
                return new BaseState( false, AppInfo.ILLEGAL ).toJSONString();
            }
            
            return callbackName+"("+this.invoke()+");";
            
        } else {
            return this.invoke();
        }

    }
    
    public String invoke() {
        
        if ( actionType == null || !ActionMap.mapping.containsKey( actionType ) ) {
            return new BaseState( false, AppInfo.INVALID_ACTION ).toJSONString();
        }
        
        if ( this.configManager == null || !this.configManager.valid() ) {
            return new BaseState( false, AppInfo.CONFIG_ERROR ).toJSONString();
        }
        
        State state = null;
        
        int actionCode = ActionMap.getType( this.actionType );
        
        Map<String, Object> conf = null;
        
        switch ( actionCode ) {
        
            case ActionMap.CONFIG:
                return this.configManager.getAllConfig().toString();
                
            case ActionMap.UPLOAD_IMAGE:
            case ActionMap.UPLOAD_SCRAWL:
            case ActionMap.UPLOAD_VIDEO:
            case ActionMap.UPLOAD_FILE:
                conf = this.configManager.getConfig( actionCode );
                state = new Uploader( request, conf ).doExec();
                break;
                
            case ActionMap.CATCH_IMAGE:
                conf = configManager.getConfig( actionCode );
                String[] list = this.request.getParameterValues( (String)conf.get( "fieldName" ) );
                state = new ImageHunter( conf ).capture( list );
                break;
                
            case ActionMap.LIST_IMAGE:
            case ActionMap.LIST_FILE:
                conf = configManager.getConfig( actionCode );
                int start = this.getStartIndex();
                state = new FileManager( conf ).listFile( start );
                break;
                
        }
        
        return state.toJSONString();
        
    }
    
    public int getStartIndex () {
        
        String start = this.request.getParameter( "start" );
        
        try {
            return Integer.parseInt( start );
        } catch ( Exception e ) {
            return 0;
        }
        
    }
    
    /**
     * callback参数验证
     */
    public boolean validCallbackName ( String name ) {
        
        if ( name.matches( "^[a-zA-Z_]+[\w0-9_]*$" ) ) {
            return true;
        }
        
        return false;
        
    }
    
}

终于成功了，

以为终于可以结束了，然而并不是，点击上传图片老提示没有发现上传的数据，再次debug源码，spring mvc对request进行了包装，导致无法获取上传数据，无语了，那就直接换servlet处理，上代码：

package *************************;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.baidu.ueditor.ActionEnter;


public class UeditorController extends HttpServlet{

    /**
     * 
     */
    private static final long serialVersionUID = 10001L;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setHeader("Content-Type", "text/html");
        String rootPath =req.getSession().getServletContext().getRealPath("/");
        String jsonFilePath=rootPath+"/resources/ueditor/jsp/config.json";
        resp.getWriter().write(new ActionEnter(req, rootPath,jsonFilePath).exec());
    }
}

web.xml添加配置：

    <servlet>
        <servlet-name>ueditor</servlet-name>
        <servlet-class>com.*.*.*.controller.UeditorController</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ueditor</servlet-name>
        <url-pattern>/ueditor/upload</url-pattern>
    </servlet-mapping>

终于要结束了吗？no，前端无法显示图片，无法在线管理，原来图片上传时保存的路径是在config.json中的

 "imagePathFormat": "/resources/ueditor/jsp/upload/image/{yyyy}{MM}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

而列出路径是这样的：

"imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出图片的目录 */

这样上面保存图片时分日期保存的，然后参照列出路径列出的是目录，那肯定不行的，于是乎干掉imagePathFormat的日期，也就是{yyyy}{MM}{dd},变成这样：

 "imagePathFormat": "/resources/ueditor/jsp/upload/image/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

改好后还是不行，原因是fileManagerUrlPrefix，imageManagerUrlPrefix配置有问题，最后改成这样终于正常了：

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "/projectTest/", /* 图片访问路径前缀 */
    "imagePathFormat": "/resources/ueditor/jsp/upload/image/{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": "/resources/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "scrawlMaxSize": 2048000, /* 上传大小限制，单位B */
    "scrawlUrlPrefix": "/projectTest/", /* 图片访问路径前缀 */
    "scrawlInsertAlign": "none",

    /* 截图工具上传 */
    "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
    "snapscreenPathFormat": "/resources/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "snapscreenUrlPrefix": "/projectTest/", /* 图片访问路径前缀 */
    "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */

    /* 抓取远程图片配置 */
    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
    "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
    "catcherFieldName": "source", /* 提交的图片列表表单名称 */
    "catcherPathFormat": "/resources/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "catcherUrlPrefix": "/projectTest/", /* 图片访问路径前缀 */
    "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": "/projectTest/", /* 视频访问路径前缀 */
    "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": "/ringtione/", /* 文件访问路径前缀 */
    "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": "/resources/ueditor/jsp/upload/image/", /* 指定要列出图片的目录 */
    "imageManagerListSize": 20, /* 每次列出文件数量 */
    "imageManagerUrlPrefix": "/projectTest/", /* 图片访问路径前缀 */
    "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

    /* 列出指定目录下的文件 */
    "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
    "fileManagerListPath": "/resources/ueditor/jsp/upload/file/", /* 指定要列出文件的目录 */
    "fileManagerUrlPrefix": "/projectTest/", /* 文件访问路径前缀 */
    "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"
    ] /* 列出的文件类型 */

}

没法上传文件，在把ConfigManager贴一下：

package com.baidu.ueditor;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.json.JSONArray;
import org.json.JSONObject;

import com.baidu.ueditor.define.ActionMap;

/**
 * 配置管理器
 * 
 * @author hancong03@baidu.com
 * 
 */
public final class ConfigManager {

    private final String rootPath;
    private final String originalPath;
    private static final String configFileName = "config.json";
    private String parentPath = null;
    private JSONObject jsonConfig = null;
    // 涂鸦上传filename定义
    private final static String SCRAWL_FILE_NAME = "scrawl";
    // 远程图片抓取filename定义
    private final static String REMOTE_FILE_NAME = "remote";

    /*
     * 通过一个给定的路径构建一个配置管理器， 该管理器要求地址路径所在目录下必须存在config.properties文件
     */
    private ConfigManager(String rootPath,String jsonConfigFilePath, String contextPath, String uri)
            throws FileNotFoundException, IOException {

        rootPath = rootPath.replace("\", "/");

        this.rootPath = rootPath;

        this.originalPath = this.rootPath + uri;
        
        this.parentPath=new File(jsonConfigFilePath).getParent();
        
        this.initEnv();
    }

    /**
     * 配置管理器构造工厂
     * 
     * @param rootPath
     *            服务器根路径
     * @param contextPath
     *            服务器所在项目路径
     * @param uri
     *            当前访问的uri
     * @param jsonConfigFilePath
     *          json配置文件的绝对路径，和controller.jsp在同一目录
     * @return 配置管理器实例或者null
     */
    public static ConfigManager getInstance(String rootPath,String jsonConfigFilePath,
            String contextPath, String uri) {

        try {
            return new ConfigManager(rootPath,jsonConfigFilePath, contextPath, uri);
        } catch (Exception e) {
            return null;
        }

    }

    // 验证配置文件加载是否正确
    public boolean valid() {
        return this.jsonConfig != null;
    }

    public JSONObject getAllConfig() {

        return this.jsonConfig;

    }

    public Map<String, Object> getConfig(int type) {

        Map<String, Object> conf = new HashMap<String, Object>();
        String savePath = null;

        switch (type) {

        case ActionMap.UPLOAD_FILE:
            conf.put("isBase64", "false");
            conf.put("maxSize", this.jsonConfig.getLong("fileMaxSize"));
            conf.put("allowFiles", this.getArray("fileAllowFiles"));
            conf.put("fieldName", this.jsonConfig.getString("fileFieldName"));
            savePath = this.jsonConfig.getString("filePathFormat");
            break;

        case ActionMap.UPLOAD_IMAGE:
            conf.put("isBase64", "false");
            conf.put("maxSize", this.jsonConfig.getLong("imageMaxSize"));
            conf.put("allowFiles", this.getArray("imageAllowFiles"));
            conf.put("fieldName", this.jsonConfig.getString("imageFieldName"));
            savePath = this.jsonConfig.getString("imagePathFormat");
            break;

        case ActionMap.UPLOAD_VIDEO:
            conf.put("maxSize", this.jsonConfig.getLong("videoMaxSize"));
            conf.put("allowFiles", this.getArray("videoAllowFiles"));
            conf.put("fieldName", this.jsonConfig.getString("videoFieldName"));
            savePath = this.jsonConfig.getString("videoPathFormat");
            break;

        case ActionMap.UPLOAD_SCRAWL:
            conf.put("filename", ConfigManager.SCRAWL_FILE_NAME);
            conf.put("maxSize", this.jsonConfig.getLong("scrawlMaxSize"));
            conf.put("fieldName", this.jsonConfig.getString("scrawlFieldName"));
            conf.put("isBase64", "true");
            savePath = this.jsonConfig.getString("scrawlPathFormat");
            break;

        case ActionMap.CATCH_IMAGE:
            conf.put("filename", ConfigManager.REMOTE_FILE_NAME);
            conf.put("filter", this.getArray("catcherLocalDomain"));
            conf.put("maxSize", this.jsonConfig.getLong("catcherMaxSize"));
            conf.put("allowFiles", this.getArray("catcherAllowFiles"));
            conf.put("fieldName", this.jsonConfig.getString("catcherFieldName")
                    + "[]");
            savePath = this.jsonConfig.getString("catcherPathFormat");
            break;

        case ActionMap.LIST_IMAGE:
            conf.put("allowFiles", this.getArray("imageManagerAllowFiles"));
            conf.put("dir", this.jsonConfig.getString("imageManagerListPath"));
            conf.put("count", this.jsonConfig.getInt("imageManagerListSize"));
            break;

        case ActionMap.LIST_FILE:
            conf.put("allowFiles", this.getArray("fileManagerAllowFiles"));
            conf.put("dir", this.jsonConfig.getString("fileManagerListPath"));
            conf.put("count", this.jsonConfig.getInt("fileManagerListSize"));
            break;

        }

        conf.put("savePath", savePath);
        conf.put("rootPath", this.rootPath);

        return conf;

    }

    /**
     * Get rootPath from request,if not,find it from conf map.
     * 
     * @param request
     * @param conf
     * @return
     * @author Ternence
     * @create 2015年1月31日
     */
    public static String getRootPath(HttpServletRequest request,
            Map<String, Object> conf) {
        Object rootPath = request.getAttribute("rootPath");
        if (rootPath != null) {
            return rootPath + "" + File.separatorChar;
        } else {
            return conf.get("rootPath") + "";
        }
    }

    private void initEnv() throws FileNotFoundException, IOException {

        File file = new File(this.originalPath);

        if (!file.isAbsolute()) {
            file = new File(file.getAbsolutePath());
        }

        if(this.parentPath==null)
            this.parentPath = file.getParent();

        String configContent = this.readFile(this.getConfigPath());

        try {
            JSONObject jsonConfig = new JSONObject(configContent);
            this.jsonConfig = jsonConfig;
        } catch (Exception e) {
            this.jsonConfig = null;
        }

    }

    private String getConfigPath() {
        String path = this.getClass().getResource("/").getPath()
                + ConfigManager.configFileName;
        if (new File(path).exists()) {
            return path;
        } else {
            return this.parentPath + File.separator
                    + ConfigManager.configFileName;
        }
    }

    private String[] getArray(String key) {

        JSONArray jsonArray = this.jsonConfig.getJSONArray(key);
        String[] result = new String[jsonArray.length()];

        for (int i = 0, len = jsonArray.length(); i < len; i++) {
            result[i] = jsonArray.getString(i);
        }

        return result;

    }

    private String readFile(String path) throws IOException {

        StringBuilder builder = new StringBuilder();

        try {

            InputStreamReader reader = new InputStreamReader(
                    new FileInputStream(path), "UTF-8");
            BufferedReader bfReader = new BufferedReader(reader);

            String tmpContent = null;

            while ((tmpContent = bfReader.readLine()) != null) {
                builder.append(tmpContent);
            }

            bfReader.close();

        } catch (UnsupportedEncodingException e) {
            // 忽略
        }

        return this.filter(builder.toString());

    }

    // 过滤输入字符串, 剔除多行注释以及替换掉反斜杠
    private String filter(String input) {

        return input.replaceAll("/\*[\s\S]*?\*/", "");

    }

}

最后在给个github ue的url：https://github.com/fex-team/ueditor，将ActionEnter和ConfigManager替换并导出的jar替换官方的jar即可按照图中所述的方式使用了。