JSP的那些事兒（10）—-FCKeditor使用集錦

文章目錄

• 一、FCKeditor簡介
• 二、下載
• 三、部署配置
• 四、測試頁面

一、FCKeditor簡介

FCKeditor是一個專門使用在網頁上屬於開放原始碼的所見即所得 (WYSIWYG)文字編輯器。它志於輕量化，不需要太複雜的安裝步驟即可使用。它可和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><br /> <servlet-name>Connector</servlet-name><br /> <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class><br /> <init-param><br /> <param-name>baseDir</param-name><br /> <param-value>/UserFiles/</param-value><br /> </init-param><br /> <init-param><br /> <param-name>debug</param-name><br /> <param-value>true</param-value><br /> </init-param><br /> <load-on-startup>1</load-on-startup><br /> </servlet></p><p> <servlet><br /> <servlet-name>SimpleUploader</servlet-name><br /> <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class><br /> <init-param><br /> <param-name>baseDir</param-name><br /> <param-value>/UserFiles/</param-value><br /> </init-param><br /> <init-param><br /> <param-name>debug</param-name><br /> <param-value>true</param-value><br /> </init-param><br /> <init-param><br /> <param-name>enabled</param-name><br /> <param-value>true</param-value><br /> </init-param><br /> <init-param><br /> <param-name>AllowedExtensionsFile</param-name><br /> <param-value></param-value><br /> </init-param><br /> <init-param><br /> <param-name>DeniedExtensionsFile</param-name><br /> <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value><br /> </init-param><br /> <init-param><br /> <param-name>AllowedExtensionsImage</param-name><br /> <param-value>jpg|gif|jpeg|png|bmp</param-value><br /> </init-param><br /> <init-param><br /> <param-name>DeniedExtensionsImage</param-name><br /> <param-value></param-value><br /> </init-param><br /> <init-param><br /> <param-name>AllowedExtensionsFlash</param-name><br /> <param-value>swf|fla</param-value><br /> </init-param><br /> <init-param><br /> <param-name>DeniedExtensionsFlash</param-name><br /> <param-value></param-value><br /> </init-param><br /> <load-on-startup>1</load-on-startup><br /> </servlet></p><p> <servlet-mapping><br /> <servlet-name>Connector</servlet-name><br /> <url-pattern>/fckeditor/connector</url-pattern><br /> </servlet-mapping></p><p> <servlet-mapping><br /> <servlet-name>SimpleUploader</servlet-name><br /> <url-pattern>/fckeditor/simpleuploader</url-pattern><br /> </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" /><br /><mce:script type="text/javascript" src="../../../fckeditor/fckeditor.js" mce_src="fckeditor/fckeditor.js"></mce:script>

2、添加如下代碼：

<%<br />String content=request.getParameter("content");<br />if (content != null) {<br /> content = content.replaceAll("/r/n", "");<br /> content = content.replaceAll("/r", "");<br /> content = content.replaceAll("/n", "");<br /> content = content.replaceAll("/"", "'");<br />}else{<br /> content = "";<br />}<br />%><br /><span><br /> <script type="text/javascript"><br /> var oFCKeditor = new FCKeditor('content');//傳入參數為表單元素（由FCKeditor產生的input或textarea）的name<br /> oFCKeditor.BasePath='../../../fckeditor/';//指定FCKeditor根路徑，也就是fckeditor.js所在的路徑<br /> oFCKeditor.Height='100%';<br /> oFCKeditor.Value="<%=content%>";//預設值<br /> oFCKeditor.Create();<br /> </script><br /></span>

3、瀏覽即可看到如下頁面（本文只有關鍵代碼）：