Ueditor 1.4.3 图片上传配置

浏览数：88 / 时间：2015年06月09日

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 */