百度富文本ueditor使用 以及 与 Struts2 整合时出现的问题解决

1.HTML 环境搭建

百度富文本下载地址

http://ueditor.baidu.com/website/download.html

解压完成之后的目录（没有demo.html）

根据官方文档说明可以创建一个demo.html 

也可以直接修改index.html 来进行开发

创建一个富文本框的最简代码为

 <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>

放在网页中即可显示

二。jsp环境搭建
上面说的都是html 的
现在来说说 在jsp项目中的使用。
将下载的文件放在wen项目的 webRoot 下
（这时候使用富文本框的时候要注意一下js文件的引用路径）
注意：
jsp文件夹下面有一个lib包，里面存放了需要用到的jar包
将这些jar包放置在WEB-INF/lib的目录下
如果使用maven 管理项目的话，因为maven远程仓库跟本地仓库都是没有 ueditor 的jar的，所以需要手动配置添加到本地仓库
三。与Struts2 整合，
经过上面的步骤，我相信大家一定已经成功将富文本框显示出来了。
效果是这样的
但是如果有人的项目中使用了Struts来封装 servlet 一定就发现了一些问题
没错    图片附件之类的没法上传

找不到文件的数据
这是因为 Struts2中有实现好的文件上传功能，拦截器会拦截文件上传的请求然后使用默认的文件上传功能。这样ueditor的文件上传就没法接收到请求，接收不到文件的数据
解决方法：在Struts.xml中添加配置项，屏蔽到对ueditor请求的拦截
 

<constant name="struts.action.excludePattern" value="/ueditor/.*" />

value里面放置的是文件路径


，重启项目之后文件可以上传成功了，但是立刻又发现文件无法正常的在富文本框中显示出来。
点击左上角的html可以直接看到源码，会发现文件的路径不对。
这是因为在config.json 下面系统有一个默认路径

* 前后端通信相关的配置,注释只允许使用多行方式 */
{
    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

重点关注 imageUrlPrefix  和   imagePathFormat
imageUrlPrefix 中配置项目名
imagePathFormat 中配置文件需要保存的路径
修改如下：

 /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "/newschange/", /* 图片访问路径前缀 */
    "imagePathFormat": "/ueditor/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

之后在运行测试，发现真正的成功了。