FCKeditor 2.6 最新版本:
http://ncu.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.6.zip
或者:
http://www.fckeditor.net/download(官方网站)
FCKeditor是sourceforge.net上面的一个开源项目,主要是实现在线网页编辑器的功能,可以让web程序拥有如MSWord这样强大的编辑功能。官方网站为http://www.fckeditor.net,在服务器端支持ASP.Net、ASP、ClodFusion、PHP、Java等语言,并且支持IE5+、Mozilla。
一、FCKeditor 在JSP上的应用:
1. 下载fckeditor,注意有两个包,一个是主文件,一个是jsp整合包的。
解压FCKeditor后,结构:\FCKeditor_2.6\fckeditor, 在此我只想要一层文件夹,所以我只复制了fckeditor的所有文件,然后更改目录名为:FCKeditor 到网站根目录下。格式如下: webRoot/FCKeditor.
注意: FCKeditor文件夹下应该有两个文件夹分别是:_samples,editor,
还是其他文件(*.jsp;*.php;*asp;*js;*html)
2. 配置工程中的web.xml文件,两个servlet,servlet-mapping: 配置后的Web.xml代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<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>
<!-- 指定文件上传路径 -->
<!-- "/UserFiles/" 这表示我需要在WebRoot目录下新建 UserFiles 文件夹,然后上传的文件都会被保存到该目录下。
当然,你也可以直接到系统路径上:D:/upload/file。
但是你在外部访问或显示服务器图片的时候就得注意处理好相应的路径,
建议还是直接在WebRott下面见一个文件夹,方便访问-->
<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>
/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>
</web-app>
3. JSP调用:
方式一:Javacript调用
<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>
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'contest' ) ;
// 此处的 contest 必须是文本域的name
//oFCKeditor.BasePath = 'FCKeditor/' ;
oFCKeditor.ToolbarSet = 'Default' ;
oFCKeditor.Width = '100%' ;
oFCKeditor.Height = '400' ;
oFCKeditor.Value = '' ;
oFCKeditor.ReplaceTextarea();
//oFCKeditor.Create() ;
</script>
<input type="submit" name="Submit" value="提交" />
</td>
</tr>
</table>
</form>
方式二: Tablib标签调用
新建一个FCKeditor.tld文件 (当然可以到网上下载这个模版tab文件),放置WEB-INF下面;
FCKdeitor.tld 代码如下:
jsp调用:
先导入:<%@ taglib prefix="FCK" uri="/WEB-INF/FCKeditor.tld"%>
然后:
<form id="form1" name="form1" method="post" action="default_do.jsp">
<table width="100%" border="0">
<tr>
<td height="25">
<FCK:editor id="contest" width="100%" height="400"
toolbarSet="Default"
basePath="${basePath}FCKeditor/"
skinPath="${basePath}FCKeditor/editor/skins/default/"></FCK:editor>
<input type="submit" name="Submit" value="提交" />
</td>
</tr>
</table>
</form>