HTML編輯器FCKeditor使用詳解

 一、簡介
功能：所見即所得，支援圖片和Flash，工具列可自由配置，使用簡單
相容性：IE 5.5+、Firefox 1.5+、Safari 3.0+、Opera 9.50+、Netscape 7.1+、 Camino 1.0+
成熟度：使用廣泛，被Baidu、CSDN等選用
二、下載
官方下載首頁：http://www.fckeditor.net/download/，目前版本為2.5.1
需要下載FCKeditor 2.5.1 （FCKeditor_2.5.1.zip）和FCKeditor.Java（FCKeditor-2.3.zip）
三、部署
本例以WebRoot作為應用根路徑，部署後的目錄結構如下圖所示：

1. FCKeditor_2.5.1. zip解壓縮，將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. /servlet-class＞
＜init-param＞
＜param-name＞baseDir＜/param-name＞
＜param-value＞/UserFiles/＜/param-value param＞
＜param-name＞debug＜/param-name＞
＜param-value＞true＜/param-value＞
＜/init-param＞非常startup＞
＜/servlet＞
＜servlet＞
＜/servlet＞
＜servlet＞
＜servlet-name＞SimpleUploader＜/servlet-name＞
＜servlet-class＞com.fredck.FCKasparaplet,FCSi ＞
＜param-name＞baseDir＜/param-name＞
＜param-value＞/UserFiles/＜/param-value＞
＜/init-param＞
＜ /param-name＞
＜param-value＞true＜/param-value＞
＜/init-param＞
＜init-param＞
＜param-name＞enabled true＜/param-value＞
＜/init-param＞
＜init-param＞
＜param-name＞AllowedExtensionsFile＜/param-name＞．＜ param＞
＜init-param＞
＜param-name＞DeniedExtensionsFile＜/param-name＞
＜param-value＞php|php3|php5|phtml|aspaspx|aspx|cm|?Sspw| |exe|dll|reg|cgi＜/param-value＞
＜/init-param＞
＜init-param＞
＜param-name＞AllowedExtensionsImage＜/param-name＞-param- jpeg|png|bmp＜/param-value＞
＜/init-param＞
＜init-param＞
＜param-name＞DeniedExtensionsImage＜/param-＜param-name＞Denied ＜/init-param＞
＜init-param＞
＜param-name＞AllowedExtensionsFlash＜/param-name＞
＜param-value＞＜ -param＞
＜param-name＞DeniedExtensionsFlash＜/param-name＞
＜param-value＞＜/param-value＞
＜/init-param＞＜/param-value＞
＜/init-param＞＞ startup＞
＜/servlet＞
＜servlet-mapping＞
＜servlet-name＞Connector＜/servlet-name＞
＜url-pattern＞/fckeditor/connconnid ＜servlet-mapping＞
＜servlet-name＞SimpleUploader＜/servlet-name＞
＜url-pattern＞/fckeditor/simpleuploader＜/url-pattern＞
＜/served/peded/ped/eded/eded/Eed/Eed/Eed/Eed/Ted/T/T/T/T/B./服務/S版本. fckconfig.js，修改部分如下：
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/
default/browser.html?Connector=/fckeditor/connector' ;
FCKConfig.ImageB /
default/browser.html?Type=Image&Connector=/fckeditor/connector' ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/
default/browser.html.html> FCKConfig.LinkUploadURL = '/fckeditor/simpleuploader?Type=File' ;
FCKConfig.ImageUploadURL = '/fckeditor/simpleuploader?Type=Image' ;
FCKConfig.FlashUpURURLuploader?Type=Image' ;
FCKConfig.FlashloadURLlash = '
(1) 步驟3、4設定了檔案瀏覽和上傳的配置，web.xml中Servlet的要和fckconfig.js中的URL引用一致；
(2) 本例正常運作的前提是WebRoot被部署為根路徑，如果設了虛擬路徑會找不到servlet。
四、使用
本例使用最直接的js方式，API和TagLib方式參考FCKeditor-2.3.zip解壓縮後_samples下的例子。
fckdemo.jsp:
＜%@ page contentType="text/html;charset=GBK"%＞
＜html＞
＜head＞
＜title＞FCKeditor Test＜＜head＞
＜title＜ " src="/fckeditor/fckeditor.js"＞＜/script＞
＜/head＞
＜body＞
＜form action="fckdemo.jsp" method="post"＞
＜ % getParameter("content");
if (content != null) {
content = content.replaceAll("rn", "");
content = content.replaceAll("r", "");
content = content.replaceAll("n", "");
content = content.replaceAll(""", "'");
}else{
content = "";
}
%＞
＜table width=100%＞
＜tr＞
＜td colspan=4 style='text-align:center' width=100% colspan=4 style='text-align:center' width=100% height ＜script type="text/javascript"＞
var oFCKeditor = new FCKeditor('content');//傳入參數為表單元素（由FCKeditor產生的input或textarea）的name
oFCKeditor.BasePath='/fckeditor/ ';//指定FCKeditor根路徑，也就是fckeditor.js所在的路徑
oFCKeditor.Height='100%';
oFCKeditor.ToolbarSet='Demo';//指定工具列
oFCKeditor=Value="＜%='Demo';//指定工具列
oFCKeditor=Value="＜%='Demo';//指定工具列
oFCKeditor. content%＞";//預設值
oFCKeditor.Create();
＜/script＞
＜/span＞
＜/td＞
＜/tr＞＜＜＜ "submit" value="提交"＞＜/td＞＜/tr＞
＜tr＞＜td＞ ＜/td＞＜/tr＞
＜tr＞＜td＞＜/tr＞
＜tr＞＜td＞＜/tr＞
＜tr＞＜td＞＜/tr＞
＜tr＞＜ /td＞＜/tr＞
＜tr＞＜td style="padding:10px;"＞＜%=content%＞＜/td＞＜/tr＞＜/table＞＜/td＞＜/tr＞＜＜ ＞
＜/html＞
效果圖：

五、設定檔fckconfig.js
1. DefaultLanguage：缺省語言，可變更為「zh-cn」
2. 自訂工具列：可修改或增加ToolbarSets，例如：
FCKConfig.ToolbarSets["Demo"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink
','- ','TextColor','BGColor','-','Style','-','Image','Flash','Table']
] ;
3. EnterMode和ShiftEnterMode：「回車」和「 Shift+回車」的換行行為，註釋提示了可選模式
4. EditorAreaCss：編輯區樣式檔案
5. 其他參數：
AutoDetectLanguage=true/false 自動偵測語言 
BaseHref="" 相對連結的基底位址 ="ltr/rtl" 預設文字方向 
ContextMenu=字串陣列,右鍵選單的內容 
CustomConfigurationsPath="" 自訂設定檔路徑與名稱 
Debug=true/false 是否開啟偵錯功能,當調用()時,會在調試窗中輸出內容 
EnableSourceXHTML=true/false 為TRUE時,當由可視化界面切換到代碼頁時,把HTML處理成XHTML 
EnableXHTML=true/falsempty =true/false 使用這個功能,可以將空的區塊級元素用空格來替代 
FontColors="" 設定顯示顏色拾取器時文字顏色列表 
FontFormats="" 設定顯示在文字格式清單中的命名 
FontNames= "" 字型清單中的字型名稱 
FontSizes="" 字型大小中的字號清單 
ForcePasteAsPlainText=true/false 強制貼上為純文字 
ForceSimpleAmpersand=true/false 是否不以實體&」為XMLML
ForceSimpleAmpersand=true/false 是否不將其符號轉換為XMLML
="Form)當在原始碼格式下縮排程式碼使用的字元 
FormatOutput=true/false 當輸出內容時是否自動格式化程式碼 
FormatSource=true/false 在切換到程式碼檢視時是否自動格式化程式碼 
FullPage=true/false 是否允許編輯整個HTML檔案,還是僅允許編輯BODY間的內容 
GeckoUseSPAN=true/false 是否允許SPAN標記代替B,I,U標記 
IeSpellDownloadUrl=""下載拼字檢查器的網址瀏覽伺服器功能 
ImageBrowserURL="" 瀏覽伺服器時執行的URL 
ImageBrowserWindowHeight="" 影像瀏覽器視窗高度 
ImageBrowserWindowWidth="" 映像瀏覽器視窗寬度．＜LinkBrowser 是否允許插入圖片="" 插入連結時瀏覽伺服器的URL 
LinkBrowserWindowHeight=""連結目標瀏覽器視窗高度 
LinkBrowserWindowWidth=""連結目標瀏覽器視窗寬度 
Plugins=object 註冊插件/false 合併邊框 
SkinPath="" 皮膚資料夾位置 
SmileyColumns=12 圖符視窗列數 
SmileyImages=字元陣列圖符號視窗中圖片檔案名稱陣列視窗高度 
SmileyWindowWidth 圖符視窗寬度 
SpellChecker="ieSpell/Spellerpages" 設定拼字檢查器 
StartupFocus=true/false 開啟時FOCUS到編輯器 
StylesXmlPath="" 設定定義CSS樣式清單的XML檔案的位置 
TabSpaces=4 TAB鍵產生的空白字元數 
ToolBarCanCollapse=true/false 是否允許展開/折疊工具列 
ToolbarSets=object 允許使用TOOLBAR /false 開啟是TOOLBAR是否展開 
UseBROnCarriageReturn=true/false 當回車時是產生BR標記還是P或者DIV標記
六、自訂樣式
工具列的Style選項，是由fckconfig.js指定的設定檔來產生的：
FCKConfig.StylesXmlPath = FCKConfig.EditorPath + 'fckstyles.xml' ;

以上就是HTML編輯器FCKeditor使用詳解的內容，更多相關文章請關注PHP中文網（www.php.cn）！