Ueditor 1.4.3 图片上传配置
1. 在工程中引入 ueditor
ueditor其实就是一个js插件，所以一般将其，放到工程的js目录下面
如上图所示的目录，直接将下载下来的ueditor发到js目录中，特别要注意的是此时要吧 jsp 中的 lib 中的这几个包全部复制到
WEB-INF下的lib目录中，特别注意，在复制时前4个jar包可能工程中已经存在了，就一定不要引入重复的jar包，否则就会导致jar包冲突，一定要仔细
2. 在jsp文件中使用ueditor
2.1 在页面中引入 ueditor
<script type="text/javascript" charset="utf-8" src="<%=path%>/js/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="<%=path%>/js/ueditor/ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src="<%=path%>/js/ueditor/lang/zh-cn/zh-cn.js"></script>
2.2 在表单中创建 ueditor
1 <input name="contents" type="hidden" id="contents"> 2 <div style="padding-top:4px;"> 3 <script id="editor" type="text/plain" style="width:935px;height:500px;"></script> 4 </div> 5 <script type="text/javascript"> 6 //实例化编辑器 7 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例 8 var ue = UE.getEditor('editor'); 9 </script>
其中第一行中使用隐藏域的目的是可以把 ue 中的内容通过 Ueditor的 setContent 方法设置到其中，就可以通过表单提交内容了
2.3 在表单中设置内容，在修改模式下，页面一打开就有内容
1 <input name="contents" type="hidden" id="contents"> 2 <div style="padding-top:4px;"> 3 <script id="editor" type="text/plain" style="width:935px;height:500px;"> 4 ${content.contents} 5 </script> 6 </div> 7 <script type="text/javascript"> 8 //实例化编辑器 9 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例 10 var ue = UE.getEditor('editor'); 11 </script>
要将已有内容设置到 ueditor 可以采用这种方法，还有另一种方法就是使用 ueditor提供的setContent方法，但是在使用这个方法时有需要注意的就是，我们不能直接使用，而是要则编辑器创建好之后才可以调用该方法，所以我们使用Ueditor提供的事件来调用这个方法。代码如下：
1 ue.addListener("ready", function(){ 2 // editor准备好之后才可以使用 3 ue.setContent('${content.contents}'); 4 });
注意这个调用可以添加在 ue 创建完成之后，也可以，添加在，整个文件加载完成之后：
1 $(function(){ 2 ue.addListener("ready", function () { 3 alert(${content.contents}); 4 // editor准备好之后才可以使用 5 ue.setContent('hello,world'); 6 }); 7 });
到目前为止，ueditor编辑器算是集成到我们的jsp页面中了。我们可以使用ueditor的一些基本功能了。但是此时的图片，文件上传都还不能使用，此时就需要对
ueditor进行配置了.
3. 配置图片上传
对于图片上传的配置在文件
就是jsp文件夹下面的 config.json 这个文件，
1 /* 上传图片配置项 */ 2 "imageActionName": "uploadimage", /* 执行上传图片的action名称 */ 3 "imageFieldName": "upfile", /* 提交的图片表单名称 */ 4 "imageMaxSize": 2048000, /* 上传大小限制，单位B */ 5 "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */ 6 "imageCompressEnable": true, /* 是否压缩图片,默认是true */ 7 "imageCompressBorder": 1600, /* 图片压缩最长边限制 */ 8 "imageInsertAlign": "none", /* 插入的图片浮动方式 */ 9 "imageUrlPrefix": "/siteurl", /* 图片访问路径前缀 */ 10 "imagePathFormat": "/upload/contentsImage/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ 11 /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */ 12 /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */ 13 /* {time} 会替换成时间戳 */ 14 /* {yyyy} 会替换成四位年份 */ 15 /* {yy} 会替换成两位年份 */ 16 /* {mm} 会替换成两位月份 */ 17 /* {dd} 会替换成两位日期 */ 18 /* {hh} 会替换成两位小时 */ 19 /* {ii} 会替换成两位分钟 */ 20 /* {ss} 会替换成两位秒 */ 21 /* 非法字符 \ : * ? " < > | */ 22 /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
其中有这样的配置，我们所需要配置仅仅就是第10行的 imagePathFormat 这个参数。这个参数就是用来配置 上传保存路径,可以自定义保存路径和文件名格式
将其配置成服务器上的上传路径即可。同时还可以自定义上传图片的名称。还要注意，有时候我们可能还有配置 imageUrlPrefix 这个参数，否则图片不能正常访问。如果这个两个参数配置好了，我们就可以使用ueditor的上传图片的功能了。对于配置上传视频，上传文件，类似的配置。
