1. FCKeditor 介紹
FCKeditor 這個開源的HTML 文本編輯器可以讓web 程序擁有如MS Word 這樣強大的編輯功
能.FCKeditor 支持當前流行的瀏覽器如IE 5.5+, Firefox 1.0+, Mozilla 1.3+與Netscape 7+等。
FCKeditor官司方網址：http://www.fckeditor.net/
FCKeditor在線DEMO：http://www.fckeditor.net/demo
FCKeditor下載直址：http://www.fckeditor.net/download (該版本為2.3.2)，最新版已經是2.4了。
2.FCKeditor.java介紹
不能直接在JSP項目中使用，需要FCKeditor.java庫的支持。
FCKeditor.java是針對對JAVA中使用FCKeditor由Simone Chiaretta開發的FCKeditor的JAVA實現。
下載地址：http://www.fckeditor.net/download (最近版本為2.3)
3.在JAVA項目中使用FCKeditor在線編輯器
開發環境：JDK5.0 ＋<!--[if !supportLists]--> Eclipse3.2.1 + WTP1.5.2
（1）新建一個WEB工程：
（2）解壓 FCKeditor_2.3.2.zip包，將其中的 edit 文件夾到項目中的 WebRoot 目錄
（3）解壓 FCKeditor_2.3.2.zip 包，將其中的 fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件夾到項目中的 WebRoot 目錄
（4）解壓 FCKeditor.java-2.3.zip 包，將其中的 "web"WEB-INF"lib 下的兩個 jar 文件到項目的 WebRoot"WEB-INF"lib 目錄
（5）解壓 FCKeditor.java-2.3.zip 包，將其中的 "src 下的 FCKeditor.tld 文件到項目的 WebContent"WEB-INF 目錄
（6）刪除 WebContent"edit 目錄下的 _source 文件夾（以“_”開始的文件，在項目中無用）
完成后的目錄結構下如：
說明：圖中的input.jsp和display.jsp兩個是我寫的測試集成FCKeditor的JSP文件。
- 修改WebContent/WEB-INF/web.xml文件，加入FCKeditor的配置信息，如下：
xml 代碼
- xml version="1.0" encoding="UTF-8"?>
- <web-app id="WebApp_ID" 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">
- <display-name>FCKeditor<!--</span-->display-name>
- <servlet>
- <servlet-name>Connector<!--</span-->servlet-name>
- <servlet-class>
- com.fredck.FCKeditor.connector.ConnectorServlet
- <!--</span-->servlet-class>
- <init-param>
- <param-name>baseDir<!--</span-->param-name>
- <!-- 此為文件瀏覽路徑 -->
- <param-value>/UserFiles/<!--</span-->param-value>
- <!--</span-->init-param>
- <init-param>
- <param-name>debug<!--</span-->param-name>
- <param-value>true<!--</span-->param-value>
- <!--</span-->init-param>
- <load-on-startup>1<!--</span-->load-on-startup>
- <!--</span-->servlet>
- <servlet>
- <servlet-name>SimpleUploader<!--</span-->servlet-name>
- <servlet-class>
- com.fredck.FCKeditor.uploader.SimpleUploaderServlet
- <!--</span-->servlet-class>
- <init-param>
- <param-name>baseDir<!--</span-->param-name>
- <!-- 此為文件上傳路徑，需要在WebRoot 目錄下新建 UserFiles 文件夾 -->
- <!-- 根據文件的類型還需要新建相關的文件夾 Image、Flash -->
- <param-value>/UserFiles/<!--</span-->param-value>
- <!--</span-->init-param>
- <init-param>
- <param-name>debug<!--</span-->param-name>
- <param-value>true<!--</span-->param-value>
- <!--</span-->init-param>
- <init-param>
- <!-- 此參數為是否開啟上傳功能 -->
- <param-name>enabled<!--</span-->param-name>
- <param-value>false<!--</span-->param-value>
- <!--</span-->init-param>
- <init-param>
- <param-name>AllowedExtensionsFile<!--</span-->param-name>
- <param-value><!--</span-->param-value>
- <!--</span-->init-param>
- <init-param>
- <!-- 此參數為文件過濾，以下的文件類型都不可以上傳 -->
- <param-name>DeniedExtensionsFile<!--</span-->param-name>
- <param-value>
- php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi
- <!--</span-->param-value>
- <!--</span-->init-param>
- <init-param>
- <param-name>AllowedExtensionsImage<!--</span-->param-name>
- <param-value>jpg|gif|jpeg|png|bmp<!--</span-->param-value>
- <!--</span-->init-param>
- <init-param>
- <param-name>DeniedExtensionsImage<!--</span-->param-name>
- <param-value><!--</span-->param-value>
- <!--</span-->init-param>
- <init-param>
- <param-name>AllowedExtensionsFlash<!--</span-->param-name>
- <param-value>swf|fla<!--</span-->param-value>
- <!--</span-->init-param>
- <init-param>
- <param-name>DeniedExtensionsFlash<!--</span-->param-name>
- <param-value><!--</span-->param-value>
- <!--</span-->init-param>
- <load-on-startup>1<!--</span-->load-on-startup>
- <!--</span-->servlet>
- <servlet-mapping>
- <servlet-name>Connector<!--</span-->servlet-name>
- <url-pattern>
- /editor/filemanager/browser/default/connectors/jsp/connector
- <!--</span-->url-pattern>
- <!--</span-->servlet-mapping>
- <servlet-mapping>
- <servlet-name>SimpleUploader<!--</span-->servlet-name>
- <url-pattern>
- /editor/filemanager/upload/simpleuploader
- <!--</span-->url-pattern>
- <!--</span-->servlet-mapping>
- <!--</span-->web-app>
注：web.xml中已經加入了一些常用配置的說明。
- 新建input.jsp文件，內容如下：(注意內容中的” testfck”這個id)
（上面不能直接帖HTML的代碼，所以只能帖一個圖片上來，要是有知道如何帖HTML代碼的朋友，請告訴我一下，謝謝）
說明：在JSP中集成FCKeditor<!--[endif]-->JavaScript集成：
如上面內容所示，通過新建一個FCKeditor對象，然后調用該對象的設置方法來設置FCKeditor的各個屬性，最后調用FCKeditor的ReplaceTextarea()替換HTML頁面中的<textarea>標簽。另外FCKeditor也可以調用它的create()方法來直接在JSP嵌入FCKeditor編輯器。
注：注意上面的oFCKeditor.BasePath = "";用這種方式FCKeditor會去查找它的editor目錄下的fckeditor.html文件，由于我是直接將editor文件夾拷貝到WebContent目錄下，所以將它的BasePath設置為””，如果您將editor拷貝到其它目錄，請設置相應的BasePath屬性。FCKeditor默認是將其放在fckeditor目錄
（2）<!--[endif]-->使用自定義標簽該方法一定要完成第步：解壓 FCKeditor.java-2.3.zip 包，將其中的 "src 下的 FCKeditor.tld 文件到項目的 WebContent"WEB-INF 目錄
首先在JSP中加入FCKeditor標簽：
<%@ taglib uri=”/WEB-INF/FCKeditor.tld” prefix=”fck” %>
JSP頁面中加入如下代碼，集成FCKeditor編輯器：
js 代碼
-
- id="testfck" <!--—注意這里 -->
- basePath="/FCKeditor/"
- height="60%"
- skinPath="/FCKeditor/editor/skins/default/"
- toolbarSet="Default"
- 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">
-
(10) 新建文件，這個文件比較簡單，只是簡單的顯示從在線編輯器傳遞過來的內容，如下：
<%=request.getParameter("testfck")%>
注意這里的getParameter(“testfck”)，這個”testfck”就是在input.jsp中設置的id。
４．FCKeditor類說明
下面是用來在頁面中建立編輯器的FCKEDITOR 類的說明
(1) 構造器:
FCKeditor(instanceName[,width,height,toolbarSet,value])
-
instanceName:編輯器的唯一名稱(相當于ID)
(2) 屬性:
-
ToolbarSet:工具集名稱,參考FCKCONFIG.JS,默認值是Default
-
value:初始化編輯器的HTML 代碼,默認值為空
-
BasePath:編輯器的基路徑,默認為/Fckeditor/文件夾,注意,盡量不要使用相對路徑.最用相對于站點根路徑的表示方法,要以/結尾
-
CheckBrowser:是否在顯示編輯器前檢查瀏覽器兼容性,默認為true
-
DisplayErrors:是否顯示提示錯誤,默為true
(3) 集合:
Config[Key]=value
這個集合用于更改配置中某一項的值,如
oFckeditor.Config["DefaultLanguage"]="ptbr"
(4) 方法:
Create()
建立并輸出編輯器
RepaceTextArea(TextAreaName)
用編輯器來替換對應的文本框
5.如何配置FCKEDITOR
FCKEDITOR 提供了一套用于定制其外觀,特性及行為的設置集.主配置文件名為Fckconfig.js你既可以編輯主配置文件,也可以自己定義單獨的配置文件.配置文件使用JAVASCRIPT 語法.修改后,在建立編輯器時,可以使用以下語法:
varoFCKeditor=newFCKeditor('FCKeditor1')
oFCKeditor.Config['CustomConfigurationsPath']='/myconfig.js'
oFCKeditor.Create()
提醒:當你修改配置后,請清空瀏覽器緩存以查看效果
配置選項:
AutoDetectLanguage=true/false 自動檢測語言
BaseHref=""相對鏈接的基地址
ContentLangDirection="ltr/rtl"默認文字方向
ContextMenu=字符串數組,右鍵菜單的內容
CustomConfigurationsPath=""自定義配置文件路徑和名稱
Debug=true/false 是否開啟調試功能,這樣,當調用FCKDebug.Output()時,會在調試窗中輸出內容
DefaultLanguage=""缺省語言
EditorAreaCss=""編輯區的樣式表文件
EnableSourceXHTML=true/false 為TRUE 時,當由可視化界面切換到代碼頁時,把HTML 處理成XHTML
EnableXHTML=true/false 是否允許使用XHTML 取代HTML
FillEmptyBlocks=true/false 使用這個功能,可以將空的塊級元素用空格來替代
FontColors=""設置顯示顏色拾取器時文字顏色列表
FontFormats=""設置顯示在文字格式列表中的命名
FontNames=""字體列表中的字體名
FontSizes=""字體大小中的字號列表
ForcePasteAsPlainText=true/false 強制粘貼為純文本
ForceSimpleAmpersand=true/false
|