關於FCKeditor的網站在此 FCKeditor
本教學使用了
(1)2.4.2版的FCKeditor 下載
(2)2.3版的JSP元件 下載
安裝
1.先將下載的元件都解壓縮
2.將2.4.2版的FCKeditor放到web application的目錄底下,即"tomcat\webapps\目錄\",並將
FCKeditor取名為FCKeditor
3.在2.3版的元件中,有一個web目錄,將裡面的"WEB-INF"目錄複製到"tomcat\webapps\目錄\"中,
其中應該有
"web.xml"
"\lib\commons-fileupload.jar"
"\lib\FCKeditor-2.3.jar"
三個檔案
設定
1.先要在web.xml中設定FCKeditor的使用,必須在其中加入以下標籤
================================================================
<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>false</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>phpphp3php5phtmlaspaspxascxjspcfmcfcplbatexedllregcgi</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpggifjpegpngbmp</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>swffla</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>
================================================================
其中紅色字"UserFiles"是自訂目錄,若沒有,則系統會自動產生, 而"FCKeditor"是剛剛在放2.4.2版時,所取的名字
2.若要在JSP中使用,有很多種使用方式,本範例使用Tag的方式
首先要在標頭宣告Tag的使用,如下
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>
使用
1.在JSP中在需要使用的地方加入
<FCK:editor id="content"
basePath="/目錄/FCKeditor/"
toolbarStartExpanded="true"
height="300"
imageBrowserURL="/目錄/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/目錄/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/目錄/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/目錄/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/目錄/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/目錄/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
欲一開始顯示於編輯器內的文字
</FCK:editor>
2.取得FCKeditor的內容,須使用JavaScript
<script language="JavaScript" type="text/JavaScript">
<!--
var temp = "";
var oEditor = FCKeditorAPI.GetInstance("content");
if(oEditor != null)
temp = oEditor.GetXHTML(true);
//-->
</script>
完成後,temp內的文字即編輯器內的文字
