在JSP中使用FCKeditor_汇总

FCKeditor是sourceforge.net上面的一个开源项目，主要是实现在线网页编辑器的功能，可以让web程序拥有如MS Word这样强大的编辑功能。官方网站为http://www.fckeditor.net ，在服务器端支持ASP.Net、ASP、ClodFusion、PHP、Java等语言，并且支持IE 5+、Mozilla 、Netscape等主流浏览器。（本文将说明FCK在Java WEB中的应用）
本文使用的环境和工具：MyEclipse\FCKeditor 2.4.3 \FCKeditor.Java 2.3
下载FCKeditor------解压文件------建立WEB工程------将文件复制到相应目录------建立表单页面和信息显示页面------设置参数------给FCKeditor瘦身
是不是心动了呢?快快在它的官方网站下载它吧。你需要下载的文件有两个：一个是主文件（FCKeditor基本包），一个是jsp整合包。解压两个压缩包。
1》前期准备》将FCKeditor基本包中的fckeditor目录复制到WebRoot/util/中；将jsp整合包中的web目录下的WEB-INF目录下的web.xml文件覆盖到WebRoot/WEB-INF中的web.xml文件（或者将FCKeditor的web.xml中的关键代码复制粘贴到你的工程的web.xml中）；然后将jsp整合包中的web目录下的WEB-INF目录下的lib目录下的两个jar文件文件(commons-fileupload.jar和FCKeditor-2.3.jar)复制到你工程中的lib类包中；将jsp整合包中的src目录下的WEB-INF目录下的FCKeditor.tld文件复制到WebRoot/WEB-INF中。
好了，现在前期的准备工作完成了。
2》将FCKeditor在线编辑器弄到JSP表单页面中》有几种文法可以将FCKeditor嵌到你的JSP页面中：使用标签、使用JSP代码<%%>、使用JavaScript。我个人认为使用标签最好。
使用标签：
//　文件开头处加入　 
<%@　taglib　uri="http://fckeditor.net/tags-fckeditor"　prefix="FCK"　%>　 
//要使用的地方加入　 
<FCK:editor　id="content"
</FCK:editor>


//　文件开头处加入　 
<%@　taglib　uri="http://fckeditor.net/tags-fckeditor"　prefix="FCK"　%>　 
//要使用的地方加入　 
<FCK:editor　id="content"　basePath="/FCKeditor/"　 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　imageBrowserURL="/FCKeditorhttp://oldblog.voc.com.cn/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"　 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　linkBrowserURL="/FCKeditorhttp://oldblog.voc.com.cn/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"　 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　flashBrowserURL="/FCKeditorhttp://oldblog.voc.com.cn/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"　 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　imageUploadURL="/FCKeditorhttp://oldblog.voc.com.cn/editor/filemanagerhttp://oldblog.voc.com.cn/upload/simpleuploader?Type=Image"　 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　linkUploadURL="/FCKeditorhttp://oldblog.voc.com.cn/editor/filemanagerhttp://oldblog.voc.com.cn/upload/simpleuploader?Type=File"　 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　flashUploadURL="/FCKeditorhttp://oldblog.voc.com.cn/editor/filemanagerhttp://oldblog.voc.com.cn/upload/simpleuploader?Type=Flash">　 
　　　　　　　　　　　　this　is　default　content　:)　 
</FCK:editor>


三种方法调用FCKeditor
1.FCKeditor自定义标签 (必须加头文件　 <%@ taglib uri="/FCKeditor" prefix="FCK" %> )
2.script脚本语言调用 (必须引用 脚本文件 <script type="text/javascript" src="/FCKeditor/fckeditor.js"></script> )
3.FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )
--%>
<%--
<form action="show.jsp" method="post" target="_blank">
　<FCK:editor id="content" basePath="/FCKeditor/"
　　　　　　 width="700"
　　　　　　 height="500"
　　　　　　 skinPath="/FCKeditorhttp://oldblog.voc.com.cn/editor/skins/silver/"
　　　　　　 toolbarSet = "Default"
　>
　input
　　　　　　　 </FCK:editor>
<input type="submit" value="Submit">
</form>
--%>
<form action="show.jsp" method="post" target="_blank">
<table border="0" width="700"><tr><td>
<textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea>
<script type="text/javascript">
　var oFCKeditor = new FCKeditor('content') ;
　oFCKeditor.BasePath = "/FCKeditor/" ;
　oFCKeditor.Height = 400;
　oFCKeditor.ToolbarSet = "Default" ;　
　oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td></tr></table>
</form>
<%--
<form action="show.jsp" method="post" target="_blank">
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/FCKeditor/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type="submit" value="Submit">
</form>
--%>
 
启动服务器测试。。。。成功后，来给FCKeditor瘦瘦身.　
1、将FCKeditor目录下及子目录下所有以”_”下划线开头的文件夹删除
2.FCKeditor根目录下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml其余全部删除
3.将editor/filemanager/upload目录下文件及文件夹清空.
4.还可以将editor/skins目录下的皮肤文件删除，只留下default一套皮肤（如果你不需要换皮肤的话）
5.还可以将editor/lang目录下文件删除，只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件（英文，简体中文，繁体中文一般应该够用了:) ）
完成，现在看是不是清爽了很多？　
在struts+spring+hibernate中使用，上传图像功能中可能会出现报：
The output format must have a ‘{http://xml.apache.org/xalan}content-handler’ property!
错的情况，将WEB-INF/lib目录下xalan*.jar删除试试
下载:
从FCKeditor的官方站点http://www.fckeditor.net/download上下载FCKeditor 2.3.2和FCKeditor.Java，其中FCKeditor 2.3.2是源码，FCKeditor.Java是在jsp中使用的例程。　　
 
配置
将FCKeditor的jsp中使用的例程和FCKeditor源码结合起来，解压FCKeditor.Java，将解压文件夹中web目录下的所有文件拷贝到FCKeditor目录中，这样在FCKeditor目录多了两个目录：
├─_samples
│　 │　 index.jsp
│　 │　 sample.css
│　 │　 sampleslist.jsp
│　 │　
│　 └─jsp
│　　　　　　　　　 sample01.jsp
│　　　　　　　　　 sample02.jsp
│　　　　　　　　　 sample03.jsp
│　　　　　　　　　 sample04.jsp
│　　　　　　　　　 sample05.jsp
│　　　　　　　　　 sample06.config.js
│　　　　　　　　　 sample06.jsp
│　　　　　　　　　 sample07.jsp
│　　　　　　　　　 sampleposteddata.jsp
│　　　　　　　　　
└─WEB-INF
　　　 │　 web.xml
　　　 │　
　　　 └─lib
　　　　　　　　　　　 FCKeditor-2.3.jar
　　　　　　　　　　　 commons-fileupload.jar
看一下web.xml文件，里面增加了文件浏览和文件上传得servlet。
l　　　　　　　　 修改文件FCKeditor/fckconfig.js
1、　 修改属性
中文：FCKConfig.DefaultLanguage　　　　 = 'zh-cn' ;
皮肤：FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
2、　 使用servlet做文件浏览和上传
参考http://wiki.fckeditor.net/Developer%27s_Guide/Integration/Java 
//browser
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" ;
　
//upload
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanagerhttp://oldblog.voc.com.cn/upload/simpleuploader?Type=File' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanagerhttp://oldblog.voc.com.cn/upload/simpleuploader?Type=Flash' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanagerhttp://oldblog.voc.com.cn/upload/simpleuploader?Type=Image' ; 
l　　　　　　　　 修改web.xml增加FCKeditor的taglib
从FCKeditor.Java解压目录/src目录下拷贝FCKeditor.tld文件到WEB-INF目录下，在web.xml文件中增加： 
<taglib>
　　　 <taglib-uri>/WEB-INF/FCKeditor.tld</taglib-uri>
　　　 <taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib> 
使用
在 jsp 页面中作如下调用（具体如何使用可以看 FCKeditor.tld定义 ）：
...
　
<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="FCK" %>
　
...
　
<FCK:editor id="EditorDefault" basePath="/FCKeditor/">
This is FCKeditor demo!
</FCK:editor>
　
...