fckeditor的使用和struts2的上传配置

最新推荐文章于 2025-09-12 18:08:49 发布

weixin_30867015

最新推荐文章于 2025-09-12 18:08:49 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： java web.xml javascript ViewUI

原文链接：http://www.cnblogs.com/xiaomuv587/archive/2012/08/30/2663220.html

本文详细介绍了如何解决FCKeditor与Struts2整合时上传图片失败的问题，通过自定义过滤器巧妙地绕过了Struts2的拦截器，确保了FCKeditor的正常工作。

1. FCKeditor 介绍
FCKeditor 这个开源的HTML 文本编辑器可以让web 程序拥有如MS Word 这样强大的编辑功
能.FCKeditor 支持当前流行的浏览器如IE 5.5+, Firefox 1.0+, Mozilla 1.3+与Netscape 7+等。

FCKeditor官司方网址：http://www.fckeditor.net/

FCKeditor在线DEMO：http://www.fckeditor.net/demo

FCKeditor下载直址：http://www.fckeditor.net/download

2. FCKeditor上传配置

1.在web.xml中配置

    <servlet>
        <servlet-name>Connector</servlet-name>
        <servlet-class>
            com.fredck.FCKeditor.connector.ConnectorServlet
        </servlet-class>
        <init-param>
            <param-name>baseDir</param-name>
            <param-value>/UserFiles/</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Connector</servlet-name>
        <url-pattern>
            /fckeditor/editor/filemanager/connectors/*
        </url-pattern>
    </servlet-mapping>


    <servlet>
        <servlet-name>SimpleUploader</servlet-name>
        <servlet-class>
             com.fredck.FCKeditor.uploader.SimpleUploaderServlet 
        </servlet-class>
        <init-param>
            <param-name>baseDir</param-name>
            <param-value>/UserFiles/</param-value>
        </init-param>
        <init-param>
            <param-name>enabled</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsFile</param-name>
            <param-value></param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsFile</param-name>
            <param-value>
                php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi
            </param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsImage</param-name>
            <param-value>jpg|gif|jpeg|png|bmp</param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsImage</param-name>
            <param-value></param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsFlash</param-name>
            <param-value>swf|fla</param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsFlash</param-name>
            <param-value></param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>SimpleUploader</servlet-name>
        <url-pattern>/fckeditor/simpleuploader</url-pattern>
    </servlet-mapping>

要先在WebRoot下新建一个文件夹UserFiles，导入架包FCKeditor-2.3.jar，commons-fileupload-1.1.1.jar；
2.在editor/fckconfig.js中的325行找到上传的代码，下图中的testservlet1就是你的项目名其他的不用改，还有那个fckeditor是页面上新建的路径

3.新建一个页面addContent.jsp，然后引用fckeditor.js

<html>
    <head>

        <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
        <title>FCKeditor</title>
    </head>
    <body>
        <form id="form1" name="form1" method="post" action="default_do.jsp">
            <table width="100%" border="0">
                <tr>
                    <td height="25">
                        <textarea name="contest" id="contest"
                            style="width: 100%; height: 400px;"></textarea>
                            <div id="contest">
                        <script type="text/javascript">
                                var fck =new FCKeditor('contest');
                            fck.BasePath='<%=request.getContextPath()%>/fckeditor/';
                               fck.Height=500;
                               fck.Width=700;
                              fck.Value='请输入内容'
                              fck.ToolbarSet="Default";
                              fck.ReplaceTextarea();
                            </script>
                            </div>
                        <input type="submit" name="Submit" value="提交" onclick="return check()" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

在这个页面如果写了textare，在下面的javascript里调用fck.ReplaceTextarea();，他是根据name的值替换的如果没有写则调用fck.create();

再建一个default_do.jsp页面接收

<html>
  <head>
    
    <title>My JSP 'default_do.jsp' starting page</title>
    

  </head>
  
  <body>
    <%
String contest = new String(request.getParameter("contest").getBytes("ISO8859_1"), "GB2312");
out.print(contest);
%>

  </body>
</html>

3.struts2 FCKeditor不能上传图片的问题

前提是，FCKeditor已经整合到你的Web项目中，FCKeditor已经可以使用，但就是在上传图片的时候一直停住不动，如下图。如果FCKeditor单纯地在jsp页面上显示，不会存在这样的问题。但是如果FCKeditor与Struts整合，就会出现这样的问题。造成此问题的原因就是Struts的拦截器，在web.xml配置文件中，可以清楚的看到：

<filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

就是上面这个配置，Struts会拦截所以以“/”开头的URL

在FCKeditor的配置中，FCKeditor是使用servlet来实现的，它也是通过拦截URL的机制进行工作的，FCKeditor的部分servlet配置如下：

<servlet-mapping>
        <servlet-name>Connector</servlet-name>
        <url-pattern>
            /fckeditor/editor/filemanager/connectors/*
        </url-pattern>
    </servlet-mapping>

现在就很明了了，struts拦截所有以“/”开头的URL，FCKeditor的servlet拦截所有以“/fckeditor/editor/filemanager/connectors/”开头的URL，当你使用FCKeditor上传图片的时候，URL中包含有“/”（指网站根目录），优先被struts的拦截器拦截，这样上传图片的URL请求自然就不会转发到FCKeditor的servlet，所以我们上传图片也就不成功。

网上有很多解决方法，但多数是修改struts的拦截范围，如将"/*"改成"*.do"或"*.action"之类的。这不是一个好方法，因为在我的项目中，我没有使用do或action的URL扩展，这样显然不能解决我的问题，那么有没有一个更加完美的解决方法呢？

答案是肯定的。我自己定义了一个过滤器MyStrutsPrepareAndExecuteFilter.java，让它继承Struts2的过滤器StrutsPrepareAndExecuteFilter，完整代码如下：

public class MyStrutsPrepareAndExecuteFilter extends
        StrutsPrepareAndExecuteFilter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res,
            FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        if (request.getRequestURI().indexOf("fckeditor") != -1) {
            chain.doFilter(req, res);
        } else {
            super.doFilter(req, res, chain);
        }
    }

}

自定义的过滤器写完之后，要在web.xml中更改struts的拦截器类，不能再使用struts的默认拦截器类StrutsPrepareAndExecuteFilter。但是请放心，自定义的过滤器FCKFilter继承了StrutsPrepareAndExecuteFilter里的所有的方法，因此项目依然照常运行。(被注释的是原来的配置)

<filter>
        <filter-name>struts2</filter-name>
        <filter-class>
            <!--org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter-->
            com.sky.common.util.MyStrutsPrepareAndExecuteFilter
        </filter-class>
    </filter>