Web 2.0時代時代的Web項目，是無論如何也少不了一個在線編輯器的，因此在我們的項目中整合一個Web編輯器就顯得至關(guān)重要。在這里，我依然以前面的xkland項目為例，來探討在項目中整合FCKeditor的方方面面。
一、關(guān)于用戶發(fā)表文章的功能設計
用戶發(fā)表文章的功能，大家見過不少，也用過不少，最簡單的，莫過于提供一個文本框，數(shù)據(jù)提交后直接寫入數(shù)據(jù)庫了事，稍復雜一點的最少也要提供一個輸入標題和選擇分類的功能。當然，我們也可以把我們的功能設計得更有特色。在這個示例項目中，我假設開發(fā)的是一個以圖文為中心的網(wǎng)絡社區(qū)，我們每一篇文章都需要用戶在它上傳的圖片中選擇一個作為主題圖片，那么，在網(wǎng)站首頁的文章列表上，大家看到的將不僅僅只是一個文字的標題，還有主題圖片的縮略圖。
先來看看數(shù)據(jù)表的結(jié)構(gòu)，創(chuàng)建數(shù)據(jù)表的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編輯器可用，暫時用一個文本區(qū)域代替。
二、初識FCKeditor
在聽說FCKeditor之前，我用過一個在線編輯器eWebEditor，提供ASP/JSP/PHP等好幾個版本，功能是非常的好，文檔也很詳細，但是聽說只支持IE瀏覽器；而FCKeditor在網(wǎng)上大名鼎鼎，是一個受關(guān)注非常高的開源項目，并且能夠跨瀏覽器支持。因此我選擇FCKeditor。FCKeditor的最新版本是2.4，大家可以到
http://www.fckeditor.net/download這里下載，如下圖
下載并解壓縮到fckeditor文件夾，打開該文件夾，我們可以看到如下文件及目錄：
其中_samples目錄下是示例，_testcases目錄下是測試用例，editor目錄下是編輯器的主要文件；此外，從該目錄中的文件不難看出，F(xiàn)CKeditor提供支持asp、php、perl、python等等各種服務器技術(shù)的版本，但不支持.net和Java Web。不過不要擔心，F(xiàn)CKeditor與Java Web之間的整合早就有人做好了，稍后我們就會用到。
了解瀏覽器技術(shù)的人都不難想到，Web編輯器其實應該是客戶端技術(shù)，它是通過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類，第四行就是利用該類創(chuàng)建一個編輯器對象，而myTextArea是表單中文本區(qū)域的名字，在第六行，通過FCKeditor類的ReplaceTextArea方法，文本區(qū)域就被替換成了Web編輯器。刷新頁面，就可以看到效果：
FCKeditor類提供幾個基本屬性，可以讓我們對編輯器進行簡單的控制，它們是：
InstanceName：返回編輯器示例的名字
Width：設置編輯器的寬度，默認為100%
Height：設置編輯器的高度，默認值為200
ToolbarSet：設置編輯器的工具條集合，默認值為"default"，稍后會講到怎樣自定義工具條
Value：設置顯示在編輯器中的內(nèi)容（包含HTML），默認值為空
BasePath：編輯器的目錄，一定要設置正確，否則編輯器會找不到它需要的文件，在本例中，由于我們直接將fckeditor目錄放到項目的根目錄下，因此設置為"fckeditor/"
CheckBrowser：設置是否檢測瀏覽器，默認為true
DisplayErrors：設置是否顯示錯誤信息，默認為true
此外，F(xiàn)CKeditor類還有一個集合屬性
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，讓我們可以重新構(gòu)建項目；但是，這些我們統(tǒng)統(tǒng)都不需要，我們只要web\WEB-INF目錄下的東西，在這個目錄下，提供了一個web.xml，同時在lib目錄下提供了兩個.jar文件，這便是全部?？吹竭@里，大家肯定能夠想到，Java Web項目的靈魂是什么？那就是web.xml。我們所要做的，就是把lib目錄下的兩個.jar文件拷貝到我們項目的src/main/webapp/WEB-INF/lib下，同時將web.xml中的內(nèi)容整合到我們項目的src/main/webapp/WEB-INF/web.xml中。
web.xml中的內(nèi)容很簡單，只定義了兩個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>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>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>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping> 然后，我們就可以拋開JavaScript，而在服務器端使用標簽來創(chuàng)建Web編輯器了。先在EditPosts.jsp中引入標簽庫：
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %> 再在原來放textarea的地方，放如下代碼：
<FCK:editor id="EditorDefault" basePath="fckeditor/"
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">
This is some <strong>sample text</strong>. You are using <a href="http://www.fredck.com/fckeditor/">FCKeditor</a>.
</FCK:editor> 刷新頁面，又見編輯器，此時，可以順利的上傳文件了。整合編輯器的任務到此完成。下一步，就是怎樣對編輯器進行更多的控制了。
