很經典的一篇文章，講的很好，最近我要用這個，好好熟悉一下。
Web 2.0時代時代的Web項目，是無論如何也少不了一個線上編輯器的，是以在我們的項目中整合一個Web編輯器就顯得至關重要。在這裡，我依然以前面的xkland項目為例，來探讨在項目中整合FCKeditor的方方面面。
一、關于使用者發表文章的功能設計
使用者發表文章的功能，大家見過不少，也用過不少，最簡單的，莫過于提供一個文本框，資料送出後直接寫入資料庫了事，稍複雜一點的最少也要提供一個輸入标題和選擇分類的功能。當然，我們也可以把我們的功能設計得更有特色。在這個示例項目中，我假設開發的是一個以圖文為中心的網絡社群，我們每一篇文章都需要使用者在它上傳的圖檔中選擇一個作為主題圖檔，那麼，在網站首頁的文章清單上，大家看到的将不僅僅隻是一個文字的标題，還有主題圖檔的縮略圖。
先來看看資料表的結構，建立資料表的SQL語句如下：
CREATE TABLE `topics` (
`id` int ( 11 ) NOT NULL auto_increment,
`catalogid` int ( 11 ) NOT NULL ,
`subject` varchar ( 60 ) default NULL ,
`content` text ,
`pictures` varchar ( 2000 ) NOT NULL ,
`mainpicture` varchar ( 40 ) NOT NULL ,
`userid` int ( 11 ) NOT NULL ,
`time` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP ,
`lastedittime` timestamp NOT NULL default ' 2007-01-01 00:00:00 ' ,
`lastreplytime` timestamp NOT NULL default ' 2007-01-01 00:00:00 ' ,
`visitcount` int ( 11 ) NOT NULL ,
PRIMARY KEY (`id`),
KEY `subject` (`subject`),
KEY `userid` (`userid`),
KEY `time` (`time`),
KEY `lastreplytime` (`lastreplytime`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 |
其中，catalogid字段為文章分類，subject字段為标題，content字段為正文。比較特殊的是pictures字段和mainpicture字段，pictures儲存文章中包含的所有圖檔的url，以“|”符号分割，如“001.jpg|002.jpg|003.jpg...”，而mainpicture就是主題圖檔的url了。有人會問：“儲存主題圖檔的url就夠了，為什麼還要儲存所有的圖檔url呢？”，這樣設計主要是為了考慮到使用者有時候會修改文章，重新選擇别的圖檔作為主題圖檔，這個時候pictures字段就派上用場了，因為它可以向使用者提供候選項。
這樣的功能設計應該提供如下的使用者界面，該頁面檔案名為EditPosts.jsp：
在這裡，我們還沒有Web編輯器可用，暫時用一個文本區域代替。
二、初識FCKeditor
在聽說FCKeditor之前，我用過一個線上編輯器eWebEditor，提供ASP/JSP/PHP等好幾個版本，功能是非常的好，文檔也很詳細，但是聽說隻支援IE浏覽器；而FCKeditor在網上大名鼎鼎，是一個受關注非常高的開源項目，并且能夠跨浏覽器支援。是以我選擇FCKeditor。FCKeditor的最新版本是2.4，大家可以到
http://www.fckeditor.net/download這裡下載下傳，如下圖
下載下傳并解壓縮到fckeditor檔案夾，打開該檔案夾，我們可以看到如下檔案及目錄：
其中_samples目錄下是示例，_testcases目錄下是測試用例，editor目錄下是編輯器的主要檔案；此外，從該目錄中的檔案不難看出，FCKeditor提供支援asp、php、perl、python等等各種伺服器技術的版本，但不支援.net和Java Web。不過不要擔心，FCKeditor與Java Web之間的整合早就有人做好了，稍後我們就會用到。
了解浏覽器技術的人都不難想到，Web編輯器其實應該是用戶端技術，它是通過JavaScript來控制頁面上的元素和通過彈出視窗來模拟對話框而做到的；隻有在送出文章或者上傳檔案的時候才需要跟伺服器端互動。是以，要将該編輯器快速整合到項目中以看到效果，是非常簡單的。
三、使用JavaScript整合FCKeditor
将剛剛解壓得到的fckeditor目錄拷貝到我們的項目中的src\main\webapp目錄下，打開剛才建立的EditPosts.jsp，加入如下代碼：
1
< script src = " fckeditor/fckeditor.js " ></ script >
2
< script language = " javascript " >
3
window.onload = function ()
{
4
var oFCKeditor = new FCKeditor( 'myTextArea' ) ;
5
oFCKeditor.BasePath = " fckeditor/ " ;
6
oFCKeditor.ReplaceTextarea();
7
}
</scrip>
在這裡，第一行代碼是引入fckeditor中的fckeditor.js檔案，其中定義了FCKeditor類，第四行就是利用該類建立一個編輯器對象，而myTextArea是表單中文本區域的名字，在第六行，通過FCKeditor類的ReplaceTextArea方法，文本區域就被替換成了Web編輯器。重新整理頁面，就可以看到效果：
FCKeditor類提供幾個基本屬性，可以讓我們對編輯器進行簡單的控制，它們是：
InstanceName：傳回編輯器示例的名字
Width：設定編輯器的寬度，預設為100%
Height：設定編輯器的高度，預設值為200
ToolbarSet：設定編輯器的工具條集合，預設值為"default"，稍後會講到怎樣自定義工具條
Value：設定顯示在編輯器中的内容（包含HTML），預設值為空
BasePath：編輯器的目錄，一定要設定正确，否則編輯器會找不到它需要的檔案，在本例中，由于我們直接将fckeditor目錄放到項目的根目錄下，是以設定為"fckeditor/"
CheckBrowser：設定是否檢測浏覽器，預設為true
DisplayErrors：設定是否顯示錯誤資訊，預設為true
此外，FCKeditor類還有一個集合屬性 Config[ key ] = value，通過該集合屬性，我們可以進行一個更進階的設定，如設定預設語言、更換皮膚等等。
綜上所述，下面的代碼将重新設定編輯器的高和寬、将工具條設定為基本工具條，将皮膚設定為office2003樣式：
< script src = " fckeditor/fckeditor.js " ></ script >
< script language = " javascript " >
window.onload = function ()
{
var oFCKeditor = new FCKeditor( 'myTextArea' ) ;
oFCKeditor.BasePath = "fckeditor/";
oFCKeditor.Width = "800";
oFCKeditor.Height = "300";
oFCKeditor.ToolbarSet = "Basic";
oFCKeditor.Config["SkinPath"] = "skins/office2003/";
oFCKeditor.ReplaceTextarea();
}
</ script >
效果圖：
四、通過FCKeditor.java整合FCKeditor
使用JavaScript整合FCKeditor，我們很快就能看到編輯器的效果，并進行文章的編輯。但是，在需要和伺服器端進行互動的時候（比如上傳圖檔），就會出錯。是以，我們不得不在伺服器端做一點手腳。這裡，我們需要使用的是FCKeditor.java，其最新版本是2.3，還是在剛才的下載下傳頁面，找到下載下傳連結，如下圖：
将下載下傳檔案解壓，我們可以看到有doc目錄，有src目錄，甚至還有一個build.xml，讓我們可以重新建構項目；但是，這些我們統統都不需要，我們隻要web\WEB-INF目錄下的東西，在這個目錄下，提供了一個web.xml，同時在lib目錄下提供了兩個.jar檔案，這便是全部。看到這裡，大家肯定能夠想到，Java Web項目的靈魂是什麼？那就是web.xml。我們所要做的，就是把lib目錄下的兩個.jar檔案拷貝到我們項目的src/main/webapp/WEB-INF/lib下，同時将web.xml中的内容整合到我們項目的src/main/webapp/WEB-INF/web.xml中。
web.xml中的内容很簡單，隻定義了兩個Servlet映射，并且對上傳檔案的目錄和允許哪些檔案上傳、拒絕哪些檔案上傳做了設定，如下：
< servlet >
< servlet-name > Connector </ servlet-name >
< servlet-class > com.fredck.FCKeditor.connector.ConnectorServlet </ servlet-class >
< init-param >
< param-name > baseDir </ param-name >
< param-value > /UploadFiles/ </ 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 > /UploadFiles/ </ 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/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 >
請注意，這兩個servlet的url-pattern我都在原來代碼的前面加上了/fckeditor。
然後，我們就可以抛開JavaScript，而在伺服器端使用标簽來建立Web編輯器了。先在EditPosts.jsp中引入标簽庫：
<%
@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>
再在原來放textarea的地方，放如下代碼：
< FCK:editor id ="EditorDefault" basePath ="/xkland/fckeditor/"
imageBrowserURL ="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL ="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL ="/xkland/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL ="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL ="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL ="/xkland/fckeditor/editor/filemanager/upload/simpleuploader?Type=Flash" >
This is some < strong > sample text </ strong > . You are using < a href ="http://www.fredck.com/fckeditor/" > FCKeditor </ a > .
</ FCK:editor >
這裡有一點一定要注意，那就是這裡的屬性都要避免使用相對路徑。
重新整理頁面，又見編輯器，此時，可以順利的上傳檔案了。整合編輯器的任務到此完成。下一步，就是怎樣對編輯器進行更多的控制了。
五、對編輯器進行更多控制
1、自定義工具條：打開fckeditor目錄下的fckconfig.js檔案，添加如下代碼：
FCKConfig.ToolbarSets[ " Usable " ] = [
['Source','Preview'],
['Undo','Redo',' - ','SelectAll','Cut','Copy','Paste',' - ','RemoveFormat',' - ','Find','Replace'],
['Link','Unlink','Anchor'],
['FitWindow',' - ','About'],
' / ',
['Bold','Italic','Underline','StrikeThrough',' - ','Subscript','Superscript'],
['OrderedList','UnorderedList',' - ','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Image','Flash','Table','Rule','Smiley'],
' / ',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor']
] ;
2、添加常用的中文字型：在上面打開的檔案中找到
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ; 加上幾種我們常用的字型
FCKConfig.FontNames = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
3、更改JSP頁面中定義編輯器的标簽，如下：
< FCK:editor id ="EditorDefault" basePath ="/xkland/fckeditor/"
skinPath ="/xkland/fckeditor/editor/skins/office2003/"
toolbarSet ="Usable"
imageBro