开发环境：一个简单的SpringMVC框架中，用百度富文本编辑器 ueditor 实现图片和文件的上传
官网地址：/website/
需要使用到的2个文件如下（官网上下载）：
1，ueditor1_4_3_3-utf8-jsp.zip
2，ueditor1_4_3_3-src.zip(源码包)
SpringMVC框架搭建，我这里就不说了，注意下spring配置静态资源目录的时候，如果上传的图片是放在根目录下的话
需要在spring配置文件中加入：
<mvc:resources location="/ueditor/" mapping="/ueditor/**"></mvc:resources><!--这个是图片目标，是位于根目录，是在服务器中，而非是assets--->
也可以用另外一种方式，就是在编辑器的配置文件中更改图片保存的目录位置；
第一步：把下载下来的2个压缩文件解 放入到项目中：
解压会得到一个utf-8-jsp的文件夹，重命名为ueditor方便理解（这个名称可以随意：基本工作开发中的资源目录都是放入assets目录中，）
解压源码包得到的ueditor-1.4.3.3里面有一个jsp目录，进入C:\Users\92307\Desktop\ueditor-1.4.3.3\jsp\src 下，把com文件夹复制
到项目的java代码中：结构如下图所示
第二步：接下来就是配置ueditor到项目中了
1、后台写一个接收方法，复制下面代码即可：（可以参考assets/ueditor/jsp/controller.jsp）
/** * 百度富文本编辑器：图片上传 * @param request * @param response */ @RequestMapping("/upload") public void imgUploadByUeditor(HttpServletRequest request, HttpServletResponse response) throws IOException { request.setCharacterEncoding( "utf-8" ); response.setHeader("Content-Type" , "text/html"); ServletContext application=request.getServletContext(); String rootPath = application.getRealPath( "/" ); PrintWriter out = response.getWriter(); out.write( new ActionEnter( request, rootPath ).exec() ); }
接下来修改config.json文件的目录（在ueditor源码中）
打开项目中src\com\baidu\ueditor\ConfigManager.java
修改第28行 configFileName="/assets/ueditor/jsp/config.json"
private static final String configFileName = "/assets/ueditor/jsp/config.json";
一般公司都会有自己的项目名，可以在 config.json 中 添加 图片、文件……上加上 访问前缀，但如果服务器有几个，就比较麻烦，
所以推荐使用在configManager.java的initEvn方法中修改：如下所示
private void initEnv () throws FileNotFoundException, IOException { File file = new File( this.originalPath ); if ( !file.isAbsolute() ) {//不是绝对路劲 file = new File( file.getAbsolutePath() ); } this.parentPath = file.getParent(); String configContent = this.readFile( this.getConfigPath().replace( "\\", "/" ) ); try{ JSONObject jsonConfig = new JSONObject( configContent ); //下面是手动修改配置文件的前缀 if(!StringUtils.isEmpty(this.contextPath)){ jsonConfig.put("imageUrlPrefix",this.contextPath);//图片 jsonConfig.put("scrawlUrlPrefix",this.contextPath);//涂鸦 jsonConfig.put("snapscreenUrlPrefix",this.contextPath);//截图 jsonConfig.put("catcherUrlPrefix",this.contextPath);//抓取远程图片配置 jsonConfig.put("videoUrlPrefix",this.contextPath);//上传视频配置 jsonConfig.put("fileUrlPrefix",this.contextPath);//上传文件 jsonConfig.put("imageManagerUrlPrefix",this.contextPath);//列出指定目录下的图片 jsonConfig.put("fileManagerUrlPrefix",this.contextPath);//列出指定目录下的文件 } this.jsonConfig = jsonConfig; } catch ( Exception e ) { this.jsonConfig = null; } }
后台的配置 弄完了，接下来弄下前端的配置就ok了
第三步：打开assets/ueditor/ueditor.config.js文件
window.UEDITOR_HOME_URL =ctx+"/assets/ueditor/"; var URL = window.UEDITOR_HOME_URL || getUEBasePath(); /** * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。 */ window.UEDITOR_CONFIG = { //为编辑器实例添加一个路径，这个不能被注释 UEDITOR_HOME_URL: URL // 服务器统一请求接口路径 , serverUrl: ctx+"/upload"//这个是后台请求的路径，与上面的action对应，其中的ctx 是在引入富文本编辑器的也没中定义的，等于var ctx="${pageContext.request.contextPath}"
修改\assets\ueditor\jsp\config.json 文件
在所有的上传保存文件路径中 都加入一个前缀 /assets 如下图所示：
第三步;其实就是删除多余的文件，比如ueditor.jar可以删除，因为我们导入了源码，然后*min.js都可以删除，controller.jsp 也到删除掉，index.html可以保留
方便今后查看编辑器的构造函数
第四步;页面引入百度富文本编辑器方法:
<script> var ctx = "${ctx}";</script><!--百度编辑器---><script type="text/javascript" charset="utf-8" src="${ctx}/assets/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="${ctx}/assets/ueditor/ueditor.all.js"> </script><!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--><!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--><script type="text/javascript" charset="utf-8" src="${ctx}/assets/ueditor/lang/zh-cn/zh-cn.js"></script><script> var ue = UE.getEditor("editor");</script><div><script type="text/plain"></script></div>
--------------------------
补充：如果自定义文件上传，则，返回给编辑器的数据结构如下：
{
"state": "SUCCESS",
"original": "80px - \u526f\u672c (2).jpg",
"size": "13252",
"title": "1465731377326075274.jpg",
"type": ".jpg",
"url": "/ueditor/jsp/upload/image/0612/1465731377326075274.jpg"
}
---------------------
