UEditor1.3.6图片上传

java
java, ueditor

项目中使用的UEditor是1.3.6版本

ueditor目录结构

最新的版本上传的东西都封装到jar包了，自定义很困难。

  1. 首先下载UEditor
  2. 解压缩UEditor，会看到一下目录：

把除了index.html的文件全部拷贝到project的根目录下（如图）：

ueditor使用方法

如果要在项目中使用UEditor，在需要显示的地方加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="/test/add.action" method="post">
	<!-- 加载编辑器的容器 -->
	<script id="container" name="content" type="text/plain">
            这里写你的初始化内容
	</script>
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var editor = UE.getEditor('container');
</script>

如果需要定制编辑器上的工具栏：

可以参考：官方网站或者参考我的博客

用到图片上传的地方我们打开jsp目录：

把相应的jar包添加到web-inf/lib目录下

图片上传使用的是imageUp.jsp文件

打开文件，发现会报错，我们把Uploader.java文件放到src下把它移动到相应的package中。

com.baidu.ueditor.um

imageUp.jsp文件不需要改动，如果你要修改上传文件的路径，需要修改两个地方。

  1. 修改com.baidu.ueditor.um.Uploader#upload()方法；
  1. 如果不是上传本地服务器上，则需要修改前端的ueditor.config.js文件

  1. 如果上传到本地的服务器，则不需要修改配置。以上是上传到非本项目的web服务器；

注意，如果项目中使用了struts2，那么还需要自定义一个拦截器。不然struts2的默认拦截器会把上传的文件拦截掉，无法上传。

会出现：

  1. 无效的action
  1. 未找到数据

自定义拦截器为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class UEditorFilter extends StrutsPrepareAndExecuteFilter{

    private Loggerlog = Logger.getLogger(UEditorFilter.class);

    @Override
    public void doFilter(ServletRequest req, ServletResponseres,
            FilterChain chain)throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest)req;
        String url = request.getRequestURI();        
        System.out.println(url);
        if (url.contains(request.getContextPath() +"/ueditor/jsp/")) {            
        log.debug("使用自定义过滤器");
            chain.doFilter(req,res);
        }else{            
        log.debug("使用默认过滤器");
            super.doFilter(req,res,chain);
        }
    }
}

在web.xml中修改一下struts2的配置：

1
2
3
4
5
6
7
8
9
10
<filter>
    <filter-name>struts2</filter-name>
<!-- <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
-->
    <filter-class>com.xxz.action.UEditorFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
本文由 xxzkid | 我叫王也道长创作，采用 CC BY 3.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。
本文标题：UEditor1.3.6图片上传
本文链接：https://xxzkid.github.io/2015/ueditor1-3-6-pic-upload/