最近用了ueditor富文本编辑器,出现了问题,用文章记录下来。
ueditor是百度出品的一款富文本编辑器。我的web应用,是s2sh(struts2,spring,hibernate)。用eclipse制作。
先说说ueditor的用法,只要到官网下载,解压之后,直接粘贴到项目的WebContent文件夹下。我用的版本是ueditor1_4_3_3-utf8-jsp。
然后添加代码:
我的页面用的是jquery-easyui-1.3.3,上段代码直接加在easyui-dialog的form标签下。
运行后,页面显示出ueditor的富文本编辑器,貌似部署成功了。
那富文本编辑器的值怎么传到后台呢,我用s2sh框架,只需把属性name里改成“对象名.字段名”就行了,我改的是
但点击添加图片的按钮,在弹出框中选择要上传的图片,却显示“未找到上传数据”,图片添加失败。
找了很多攻略,说是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,删掉
程序重启,图片上传没有错误提示,却在框内只显示了一个图片名,还有一个叉。点html按钮,发现源码里图片路径中缺少项目名,所以图片显示失败
找到config.json文件的/* 上传图片配置项 */
改"imageUrlPrefix": "", /* 图片访问路径前缀 */
为"imageUrlPrefix": "/fangyun", /* 图片访问路径前缀 */
最后,ueditor 图片上传成功!解决这个问题整整花了我两天时间。一次次失败,终于成功。