JAVA 集成 Ueditor 百度富文本编辑器
开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传
官网地址:http://ueditor.baidu.com/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 id="editor" type="text/plain" style="width:100%;height:400px;"></script> </div>
--------------------------
补充:如果自定义文件上传,则,返回给编辑器的数据结构如下:
{
"state": "SUCCESS",
"original": "80px - \u526f\u672c (2).jpg",
"size": "13252",
"title": "1465731377326075274.jpg",
"type": ".jpg",
"url": "/ueditor/jsp/upload/image/20160612/1465731377326075274.jpg"
}
---------------------