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