转载请注明出处:www.thysea.com
在Web2.0时代的项目中，不能缺少一个在线的编辑器。因此在项目中整合在线编辑器显得至关重要，本文以配置FCKeditor2.4.3为例，详细介绍FCKeditor的使用。
这个HTML文本编辑器可以让web程序拥有如MS Word这样强大的编辑功能。FCKeditor支持当前流行的浏览器如IE 5.5+，Firefox 1.5+与Netscape 7.1+。
首先，去FCKeditor的主页http://www.fckeditor.net/ ，我们看到目前的最新版本是2.5beta。我们要下载的版本是当前的稳定版2.4.3，除了要下载这个FCKeditor_2.4.3，还需要下载FCKeditor.Java这个包，我们选择最新的版本FCKeditor-2.3。
下载完毕后开始配置，在eclipse下创建一个web工程TestFCKeditor，将FCKeditor_2.4.3解压得到文件夹fckeditor，将其拷入TestFCKeditor这个工程。解压FCKeditor-2.3，将FCKeditor-2.3\web\WEB-INF\lib下的2个jar文件拷入TestFCKeditor工程的相应目录，将FCKeditor-2.3\web\WEB-INF下的web.xml整合到TestFCKeditor工程的web.xml。即
<display-name>FCKeditor Test Application</display-name>
<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>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<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>debug</param-name>
<param-value>true</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>Connector</servlet-name>
<url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
复制到相应的web.xml中去。不过有一点需要注意2个servlet的映射路径需要修改为
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
并且，SimpleUploader这个servlet的enabled属性改为true，因为需要上传图片和flash的。
还需要在web.xml添加如下的代码：
<jsp-config>
<taglib>
<taglib-uri>/TestFCKeditor</taglib-uri>
<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib>
</jsp-config>
同时FCKeditor-2.3\src下的FCKeditor.tld需拷入TestFCKeditor工程的\WebRoot\WEB-INF文件夹下。
到目前为止，我们配置完了FCKeditor，不过这里面有许多文件我们用不着可以删除。下面我们给FCKeditor来做“瘦身”。
（1）
FCKeditor工程fckeditor文件夹下，保留editor文件夹、fckconfig.js、fckeditor.js、fckstyle.xml 和fcktemplates.xml其余都删除。
（2）
删除目录/editor/_source。
（3）
删除/editor/filemanager/browser/default/connectors/下的所有文件。
（4）
删除/editor/filemanager/upload/下的所有文件。
（5）
删除/editor/lang/下的除了en.js, zh.js, zh-cn.js三个文件的所有文件。
OK，“瘦身”完毕，开始修改配置。
主要修改fckconfig.js文件
将FCKConfig.DefaultLanguage修改为FCKConfig.DefaultLanguage
= 'zh-cn' ;
将FCKConfig.TabSpaces修改为
FCKConfig.TabSpaces
= 1 ;
把FCKConfig.LinkBrowserURL等的值替换成以下内容：
FCKConfig.LinkBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;
FCKConfig.ImageBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;
FCKConfig.FlashBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
最后，fckconfig.js文件，用记录本打开，修改后将文件存为utf-8 编码格式。
我们可以考试测试FCKeditor是否配置成功，
我们写下如下的测试代码：
test.jsp
<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="/TestFCKeditor" prefix="FCK" %>
<html>
<head>
<title>FCKTest</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<script type="text/javascript" src="/TestFCKeditor/fckeditor/fckeditor.js"></script>
<body>
<form action="dispaly.jsp" method="post" target="_blank">
<FCK:editor id="content" basePath="/TestFCKeditor/fckeditor/"
width="700"
height="500"
skinPath="/TestFCKeditor/fckeditor/editor/skins/silver/"
toolbarSet = "Default"
>
input
</FCK:editor>
<input type="submit" value="Submit">
</form>
</body>
</html>
display.jsp
<%
String content = request.getParameter("content");
out.print(content);
%>
我们用myeclipse将这个工程发布到tomcat下，然后输入http://localhost:8080/FCKeditor/test.jsp ，会发现有错误，我也是考虑了好久才发现，发布到tomcat下没有将fckeditor这个文件夹拷入tomcat下的工程中，只要拷入并且重启Tomcat即可。
让我们看一下运行效果，见下图。
[ 本帖最后由 风灵风之子 于 2007-10-24 01:57 编辑 ] | 
顶
支持原创
