JSP的那些事儿（10）----FCKeditor使用集锦

一、FCKeditor简介

FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。

FCKeditor 相容于绝大部分的网页浏览器，像是 : Internet Explorer 5.5+ (Windows)、Mozilla Firefox 1.0+、Mozilla 1.3+ 和 Netscape 7+。在未来的版本也将会加入对 Opera 的支援。

二、下载

1、官方下载首页：http://www.fckeditor.net/download/

2、需要下载FCKeditor 2.6.4：http://nchc.dl.sourceforge.net/project/fckeditor/FCKeditor/2.6.4.1/FCKeditor_2.6.4.1.zip

和FCKeditor.Java：http://nchc.dl.sourceforge.net/project/fckeditor/FCKeditor.Java/2.3/FCKeditor-2.3.zip

三、部署配置

1、FCKeditor 2.6.4解压，将fckeditor文件夹复制到/WebRoot/下
2、FCKeditor-2.3.zip解压，将commons-fileupload.jar和FCKeditor-2.3.jar复制到/WebRoot/WEB-INF/lib/下
3、修改/WebRoot/WEB-INF/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> <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>/fckeditor/connector</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>SimpleUploader</servlet-name> <url-pattern>/fckeditor/simpleuploader</url-pattern> </servlet-mapping>

四、测试页面

0、新建一个测试页面test.jsp

1、先添加css和js代码：具体路径根据你的页面和相关文件的相对位置

<link href="../../../fckeditor/_samples/sample.css" mce_href="fckeditor/_samples/sample.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript" src="../../../fckeditor/fckeditor.js" mce_src="fckeditor/fckeditor.js"></mce:script>

2、添加如下代码：

<% String content=request.getParameter("content"); if (content != null) { content = content.replaceAll("/r/n", ""); content = content.replaceAll("/r", ""); content = content.replaceAll("/n", ""); content = content.replaceAll("/"", "'"); }else{ content = ""; } %> <span> <script type="text/javascript"> var oFCKeditor = new FCKeditor('content');//传入参数为表单元素（由FCKeditor生成的input或textarea）的name oFCKeditor.BasePath='../../../fckeditor/';//指定FCKeditor根路径，也就是fckeditor.js所在的路径 oFCKeditor.Height='100%'; oFCKeditor.Value="<%=content%>";//默认值 oFCKeditor.Create(); </script> </span>

3、浏览即可看到如下页面（本文只有关键代码）：