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的上传图片的功能了。对于配置上传视频，上传文件，类似的配置。