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

时间：2022-12-25 19:03:47

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

1. UEditor简介

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许*使用和修改代码
ueditor富文本编辑器java使用及最简单的配置（ssh）

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文件夹内，显示也很正常。

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

相关文章