jsp与FCKeditor配置使用说明

前言：

FCKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了FCKeditor。

本文讲解JSP与fckeditor的配合使用，以使文本和图片可以一起存入数据库并读取（比如QQ空间，论坛等）。

使用步骤：

第一步：准备好以下jar包（如图）



FCKeditor jar包下载请点击此处

第二步：接下来我们要做两件事情，一件事情就是要把FCKEditor控件放到web项目中，这个控件是用于网页的，所以其代码是使用JavaScript脚本编写的，需要和web网页一起被下载的浏览器上才能执行；第二件事情就是这个网页上的控件因为支持图片的上传与下载，所以在上传与下载的时候需要服务端的支持，那么我们我的java服务端如何支持这个控件的工作呢？FCKEditor自身提供了相关的java工具，就是我们下载的第二个文件。因此我们要做的第二件事情就是在服务端配置java工具，使得FCKEditor控件在处理上传图片时能够正确工作。

接下来我们就开始对配置FCKEditor控件进行两项工作：

解压缩FCKeditor_2.6.5.zip，在其中我们能找到一个文件夹叫fckeditor，那么将这个文件夹整个复制到你的web应用的根目录下，即WebRoot下；

解压缩fckeditor-java-2.4.1-bin.zip，将这样几个jar文件复制到web应用的WEB-INF/lib目录中（commons-fileupload-1.2.1.jar，commons-io-1.3.2.jar，java-core-2.4.1.jar，slf4j-api-1.5.2.jar，slf4j-simple-1.5.2.jar），其中最后一个文件在这个zip包中可能不存在，那么你可以下载一个文件叫fckeditor-java-2.4.1-bin.zip，在这个war文件中的lib中存在上述的5个jar文件，其实在war中也包含了FCKEditor控件的内容，也就是说如果你只是下载了war也可以了。

classpath目录中创建一个名叫为fckeditor.properties的文件（即src包下面），文件中放置一行内容为：

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl；

第三步：配置web.xml

在web.xml中添加一个Servlet的配置，配置内容如下：

<servlet>
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
<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>

第四步：添加显示页面（JSP页面）

1.在需要使用这个控件的jsp文件的开头添加标签库的引入语句：

<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>

2.添加显示主页面，至此已经完成。但可能存在部分问题，后面演示。

<FCK:editor instanceName="content" basePath="/fckeditor" >
</FCK:editor>

3.获取控件中输入的内容方法：（根据自己需求而定）

（1）导入相关的方法，注意src下的路径问题:

<script type="text/javascript" src="fckeditor/editor/fckeditor.js"></script>

（2）利用javascript获得数据，当然先在body中有调用方法的动作

<input type="button" value="点击" onclick="getContent();"/>

<script type="text/javascript" language="javascript">
function getContent(){
var oEditor = FCKeditorAPI.GetInstance("content");
var fckContent = oEditor.GetXHTML(true);
window.location.href="saveIntroduce.action?fckContent="+encodeURIComponent(fckContent);
}
</script>

注意：请求时传到action中小心乱码，我使用了encodeURIComponent(fckContent)；

（3）在浏览器中输入JSP页面地址，就显示出来了



但是当点击上传图片时，问题出现了…………



一直是等待……并且控制台有问题了……

严重：Servlet.service() for servlet Connector threw exception

java.lang.IndexOutOfBoundsException: Index: 0,Size: 0



（4）解决方法：

原因分析：如果FCKeditor单纯地在jsp页面上显示，不会存在这样的问题。但是如果FCKeditor与Struts2整合，就会出现这样的问题。造成此问题的原因就是Struts2的拦截器。在web.xml配置文件中，可以清楚的看到：

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

在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核心包中没有StrutsPrepareAndExecuteFilter，也可以继承FilterDispatcher类）

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

package com.olympus.sapg.smtinnovation.util.method;

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 FCKFilter extends StrutsPrepareAndExecuteFilter {
public void doFilter(ServletRequest req,ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
String URI = request.getRequestURI();
String[] uriArray = URI.split("/fckeditor/editor/filemanager/connectors/");
int arrayLen = uriArray.length;
if (arrayLen >= 2) {
chain.doFilter(req, res);
}else {
super.doFilter(req, res, chain);
}
}
}

然后再在web.xml中更改过滤配置，只用修改filter中的class属性即可，其中为你上面那个FCKFilter 类的全名，如下：

<filter>
<filter-name>struts2</filter-name>
<filter-class>com.hime.hos.manager.action.FCKFilter</filter-class>
</filter>

至此功能已经完成。上面的代码是重写了Struts2的过滤器StrutsPrepareAndExecuteFilter中的doFilter方法，执行的原理为：

获得完整的http url地址，然后判断url地址中是否包含有FCKeditor的servlet拦截规则“/fckeditor/editor/filemanager/connectors/”，若包含，struts就不拦截该url请求，而是直接转发，交由FCKeditor的servlet来处理；若不包含，则拦截该url请求，由struts来处理。