问题说明:首先说明下环境:Ueditor 1.4.3+Sturts2,JDK1.6,Tomcat6.0。在做这个配置的时候出现了问题,就是图片不能够正常上传,总是会出现上传失败。在下边就会告诉如何解决“图片上传失败”的问题
1、Ueditor的安装
首先,我们从官方网站下载Ueditor JSP版本,UTF-8和GBK编码视自己选择:
然后解压,把解压后的文件放在webroot目录下边,我们看下Ueditor的目录(文件名我们给修改为ueditor了,关于每个目录的作用请看相关文档):
在复制之后,我们需要把ueditor—>jsp—>lib目录下的5个jar包放入WEB-INF——>lib目录下(千万要注意jar包冲突),或者直接build path到系统的jar路径下边。
在添加jar包之后,我们需要验证一下是否是安装成功了。我们先看下我的Ueditor的目录:
所以,我们启动Tomcat之后,在浏览器输入网址(具体的请根据自己的路径设置,可以参照官方文档):http://localhost:8080/yszw/styles/ueditor/jsp/controller.jsp?action=config
如果能够出现如下界面,证明安装成功:
如果显示如上界面,则为已经安装成功。
2、上传图片
在JSP中,上传图片需要配置:ueditor—>jsp—>config.json这个文件中的imageUrlPrefix和imagePathFormat这两个路径
下边给一张我的配置截图:
在这个路径配置好了后,一般的JSP都是可以使用的,但是在Struts2中是不可以使用的,我们还需要写一个过滤器:
首先,我们需要些一个Filter过滤器类:
<span style="font-size:14px;">package com.hhxy.yszw.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 MyStrutsFilter extends StrutsPrepareAndExecuteFilter{
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
String url = request.getRequestURI();
if (url.contains("/styles/ueditor/jsp/controller.jsp")) {
/*这两句在我的项目中是为了防止乱码,可以不用管
req.setCharacterEncoding("UTF-8");
res.setCharacterEncoding("UTF-8");*/
chain.doFilter(req, res);
}else{
/*req.setCharacterEncoding("UTF-8");
res.setCharacterEncoding("UTF-8");*/
super.doFilter(req, res, chain);
}
}
}
</span>
可以看到,我们写了一个过滤器类(PS:这是过滤器类,不是拦截器类,具体的大家可以搜索拦截器与过滤器区别),继承StrutsPrepareAndExecuteFilter这个类。
然后,我们就要配置web.xml文件了(过滤器想要正常使用必须放在web.xml中):
一般的,我们的struts2在web.xml中是这样配置的
<span style="font-size:14px;"><!-- 定义Struts2的核心Filter -->
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<!-- 让Struts2的核心Filter拦截所有请求 -->
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping> </span>
现在我们修改成这样子的
<span style="font-size:14px;"><filter>
<filter-name>struts2</filter-name>
<filter-class>com.hhxy.yszw.filter.MyStrutsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping></span>
可以看到,我们在filter-class改变了路径。如果已经按照以上配置好了之后,图片上传功能已经可以使用了。
疑问:为什么我们要加上这个过滤器就可以上传图片了呢?(其实我也不是特别明白,这就需要深入Struts2对连接处理的过程了)
因为struts在web.xml中的url-pattern配置过滤一切的url,所以上传图片的url会被过滤,可以写过滤器如果是上传图片的url的话我们就用自己写的过滤器,如果不是的话用默认的过滤器(道理是这样的,但是为什么上传图片url在struts2默认过滤器过滤后就不能用了呢)
3、图片上传后在本地中的位置
很多人会疑惑,已经显示上传成功了,但是在项目目录下边没有找到上传的图片啊?
其实,是找的地方出错了,图片是上传到服务器上边了,当然是在Tomcat目录下查看,贴一张我的上传后的本地位置截图(我已经上传过了):
4、自定义Ueditor界面属性
这是自定义的Ueditor:
<span style="font-size:14px;"><!-- 加载编辑器的容器 -->
<script id="container" name="postContent" type="text/plain"></script>
<input type="button" value="发表回复" onclick="Submit()" />
</div>
<!-- 配置文件 -->
<script type="text/javascript" src="styles/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="styles/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = new UE.ui.Editor({initialFrameHeight:340,initialFrameWidth:760,maximumWords:1000,autoHeightEnabled:false});
editor.render("container");
</script></span>
在这句代码中:
var editor = new UE.ui.Editor({initialFrameHeight:340,initialFrameWidth:760,maximumWords:1000,autoHeightEnabled:false});
我们定义了初始高度、初始宽度、最大输入字数,不允许自动增高(尤其是最后这个,当你放入很大的图片后,编辑框总是会变得很高)
(1)如果我没有设置autoHeightEnabled:false这个参数的话效果是这样的(编辑框一直在升高):
(2)设置autoHeightEnabled:false后就不会自动增高了:
4、几个小细节
在Ueditor—>thems—>ifame.css这个文件是Ueditor提供给开发者自定义样式的文件。然后我写了几个东西来完善这个富文本工具:
<span style="font-size:14px;">/*可以在这里添加你自己的css*/
img {
max-width: 70%; /*图片自适应宽度*/
}
body {
overflow-y: scroll !important;
}
.view {
word-break: break-all;
}
.vote_area {
display: block;
}
.vote_iframe {
background-color: transparent;
border: 0 none;
height: 100%;
}
#edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/</span>
img{}这个样式可以使得图片自适应(如果你插入一个宽度特别大的图片的话,就是比编辑框还大的,可以自动使用编辑框大小)#edui1_imagescale{display:none !important;} 这个样式可以去除掉图片上传到编辑框后出现的拉伸边框。
写的很乱,如果有问题的话可以在下面回复交流