ueditor富文本编辑器java使用及最简单的配置（ssh）

之前用过ueditor，结果这两天要用又忘了怎么用了，写个文档记录下来

1. UEditor简介

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码

2. 使用环境说明

java语言 ssh框架，但这个应该任何框架方法都通用
ueditor: 我使用的是当前最新的1.4.3.3版本
开发工具：eclipse

3.先期准备

1. 下载UEditor

   下载UEditor（不是UMEditor）1.4.3.3 jsp utf-8版本压缩包

2. 新建web项目，将web.xml,struts等文件配置好，在此不再多说。

3. 整合

   解压，将ueditor/jsp/lib下的jar包放入web项目的WEB-INF下的lib文件夹内
   （使用maven的童鞋注意：由于maven中央仓库没有ueditor，所以可直接下载的源码src包，将源码复制进项目，不用导入ueditor-1.1.2.jar了）

4. UEditor在项目里的配置

1）前端项配置

前端项的配置比较简单，只需要引入几个js

<form action="publish_saveArticle" method="post">    <!-- 加载编辑器的容器 -->    <script id="container" name="content" type="text/plain">            这里写你的初始化内容    </script>    <input type="submit" value="文章提交"></form><!-- 配置文件 --><script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/ueditor/ueditor.config.js"></script>  <!-- 编辑器源码文件 --><script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/ueditor/ueditor.all.min.js"> </script>  <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/ueditor/lang/zh-cn/zh-cn.js"> </script><script >    var ue = UE.getEditor('container');</script>

这里加载编辑器的容器那段js就是会呈现在页面的富文本编辑器，我这里直接将它包含到表单里，这样可以直接提交。

2） 后端项配置

其实这时候启动服务器已经可以看到编辑器的效果了，可是现在上传图片的时候会显示上传不成功，查看服务器目录也会发现没有图片，这是由于

在配置struts过滤器，过滤路径设置/*方式时，由于struts2框架默认使用apache的Commons FileUpload组件和内建的FileUploadInterceptor拦截器实现上传，会将request文件域封装到action中一个File类型的属性中，并删除request中的文件域，因此会上传文件失败。
– 引用自https://my.oschina.net/jiangli0502/blog/210263

为了避免这种情况，我们需要自定义一个servlet拦截器先拦截一次请求，判断若请求地址是ueditor上传图片调用的jsp则可以放行：

xxx/ueditor/jsp/controller.jsp

定义的拦截器代码：

public class UeditorFilter extends StrutsPrepareAndExecuteFilter {    public void doFilter(ServletRequest req,ServletResponse res,FilterChain chain) throws IOException,ServletException{        Properties p = new Properties();        InputStream in = UeditorFilter.class.getResourceAsStream("pic.properties");        p.load(in);        String dir = p.getProperty("url");        HttpServletRequest request =(HttpServletRequest) req;        String url = request.getRequestURI();System.out.println(url);        if(("/" + dir + "/ueditor/jsp/controller.jsp").equals(url)) {            chain.doFilter(req, res);        } else {            super.doFilter(req, res, chain);        }    }}

web.xml需要将struts拦截器的配置改成如下：

<filter>    <filter-name>struts2</filter-name><!-- filter.UmeditorFilter -->    <filter-class>xxx.UeditorFilter</filter-class>  </filter>

这里由于我的项目需要在本机和服务器两个地方部署，所以根目录不一样，我用propertis配置文件配置根目录dir。
/ueditor/jsp/controller.jsp是ueditor自带的处理上传图片逻辑的jsp。
这样上传图片就可以成功了。我们也可以看到服务器目录里的图片上传成功了。

写一个action接收表单项并跳转页面显示结果

public class PublishAction extends BaseAction {    private String content;    public String getContent() {        return content;    }    public void setContent(String content) {        this.content = content;    }    public String saveArticle() {        System.out.println(content);        putSession("content", content);        return SUCCESS;    }}

代码写好之后，需要在struts.xml里配置

<action name="publish_*" class="editor.action.PublishAction" method="{1}">            <result name="success">res.jsp</result>        </action>

res.jsp代码如下

${sessionScope.content }

这样显示内容

配置好之后，我发现上传的图片没有显示，查看html源码后发现路径不正确，
localhost:8080/ueditor/jsp/upload/image/20… .jpg
路径中没有项目目录，打开/ueditor/jsp/config.json找到
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"
这一项，前面添加上项目目录，变成
"imagePathFormat": "EditorTest/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
EditorTest是我的项目目录，这次图片正常显示，但图片目录变成
localhost:8080/EditorTest/EditorTest/ueditor/jsp/upload/image/20… .jpg,
这可能是个bug，我最终将目录改成如下：
"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"
这样图片就上传到项目根目录的upload文件夹内，显示也很正常。

配置结束，有问题欢迎留言。