ueditor与struts2整合之图片上传

最近用了ueditor富文本编辑器,出现了问题,用文章记录下来。

ueditor是百度出品的一款富文本编辑器。我的web应用,是s2sh(struts2,spring,hibernate)。用eclipse制作。

先说说ueditor的用法,只要到官网下载,解压之后,直接粘贴到项目的WebContent文件夹下。我用的版本是ueditor1_4_3_3-utf8-jsp。

然后添加代码:

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

我的页面用的是jquery-easyui-1.3.3,上段代码直接加在easyui-dialog的form标签下。

运行后,页面显示出ueditor的富文本编辑器,貌似部署成功了。

那富文本编辑器的值怎么传到后台呢,我用s2sh框架,只需把属性name里改成“对象名.字段名”就行了,我改的是

<script id="container" name="product.description" type="text/plain">

但点击添加图片的按钮,在弹出框中选择要上传的图片,却显示“未找到上传数据”,图片添加失败。

找了很多攻略,说是struts2的拦截器,把图片上传功能屏蔽了。

原因找到了,但根据网上说的,我也没有改成功,因为按教程,找不到不被屏蔽imageUp.jsp文件,后经了解,imageUp.jsp是老版本才有的。

我下载的ueditor1_4_3_3当然没有这个文件,而且找遍整个文件夹,只有controller.jsp这个是jsp文件,其它的都是js文件,html 文件。

看来所有请求都由controller.jsp担当了,我猜。

所以屏蔽的路径就是“/ueditor1_4_3_3-utf8-jsp/utf8-jsp/jsp/controller.jsp”

但是,图片上传时还是显示失败,因为有一句

HttpServletRequest request = (HttpServletRequest) req;     
String url = request.getRequestURI();

于是我想打印出url的内容是什么?但在java 文件里,System.out.println()不出来,不知道什么原因。

我想到一个办法,新建test.jsp文件,在文件里写

<% 
String url = request.getRequestURI(); 
out.println(url);
%>

显示结果为/fangyun/test.jsp,注:fangyun为我的项目名,我竟忘了写项目名路径。

改屏蔽路径“/fangyun/ueditor1_4_3_3-utf8-jsp/utf8-jsp/jsp/controller.jsp”

在com.fangyun.filter包里的UeditorStrutsFilter.java文件

完整代码如下:

package com.fangyun.filter;


import java.io.IOException;    
import javax.servlet.FilterChain;    
import javax.servlet.ServletException;    
import javax.servlet.ServletRequest;    
import javax.servlet.ServletResponse;    
import javax.servlet.http.HttpServletRequest;    
  
import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;  
  
public class UeditorStrutsFilter extends StrutsPrepareAndExecuteFilter {  
public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {    
HttpServletRequest request = (HttpServletRequest) req;     
String url = request.getRequestURI();
      
if ("/fangyun/ueditor1_4_3_3-utf8-jsp/utf8-jsp/jsp/controller.jsp".equals(url)) {       
chain.doFilter(req, res);    
}else{      
super.doFilter(req, res, chain);    
}    
}    


在web.xml,删掉<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>这句,改

<filter>
<filter-name>struts2</filter-name>
<filter-class>com.fangyun.filter.UeditorStrutsFilter</filter-class>
<!-- <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> -->
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>


程序重启,图片上传没有错误提示,却在框内只显示了一个图片名,还有一个叉。点html按钮,发现源码里图片路径中缺少项目名,所以图片显示失败

找到config.json文件的/* 上传图片配置项 */

改"imageUrlPrefix": "", /* 图片访问路径前缀 */

为"imageUrlPrefix": "/fangyun", /* 图片访问路径前缀 */


最后,ueditor 图片上传成功!解决这个问题整整花了我两天时间。一次次失败,终于成功。



展开阅读全文

没有更多推荐了,返回首页