Web 2.0時(shí)代時(shí)代的Web項目，是無(wú)論如何也少不了一個(gè)在線(xiàn)編輯器的，因此在我們的項目中整合一個(gè)Web編輯器就顯得至關(guān)重要。在這里，我依然以前面的xkland項目為例，來(lái)探討在項目中整合FCKeditor的方方面面。
一、關(guān)于用戶(hù)發(fā)表文章的功能設計
用戶(hù)發(fā)表文章的功能，大家見(jiàn)過(guò)不少，也用過(guò)不少，最簡(jiǎn)單的，莫過(guò)于提供一個(gè)文本框，數據提交后直接寫(xiě)入數據庫了事，稍復雜一點(diǎn)的最少也要提供一個(gè)輸入標題和選擇分類(lèi)的功能。當然，我們也可以把我們的功能設計得更有特色。在這個(gè)示例項目中，我假設開(kāi)發(fā)的是一個(gè)以圖文為中心的網(wǎng)絡(luò )社區，我們每一篇文章都需要用戶(hù)在它上傳的圖片中選擇一個(gè)作為主題圖片，那么，在網(wǎng)站首頁(yè)的文章列表上，大家看到的將不僅僅只是一個(gè)文字的標題，還有主題圖片的縮略圖。
先來(lái)看看數據表的結構，創(chuàng )建數據表的SQL語(yǔ)句如下：
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字段為文章分類(lèi)，subject字段為標題，content字段為正文。比較特殊的是pictures字段和mainpicture字段，pictures保存文章中包含的所有圖片的url，以“|”符號分割，如“001.jpg|002.jpg|003.jpg...”，而mainpicture就是主題圖片的url了。有人會(huì )問(wèn)：“保存主題圖片的url就夠了，為什么還要保存所有的圖片url呢？”，這樣設計主要是為了考慮到用戶(hù)有時(shí)候會(huì )修改文章，重新選擇別的圖片作為主題圖片，這個(gè)時(shí)候pictures字段就派上用場(chǎng)了，因為它可以向用戶(hù)提供候選項。
這樣的功能設計應該提供如下的用戶(hù)界面，該頁(yè)面文件名為EditPosts.jsp：
在這里，我們還沒(méi)有Web編輯器可用，暫時(shí)用一個(gè)文本區域代替。
二、初識FCKeditor
在聽(tīng)說(shuō)FCKeditor之前，我用過(guò)一個(gè)在線(xiàn)編輯器eWebEditor，提供ASP/JSP/PHP等好幾個(gè)版本，功能是非常的好，文檔也很詳細，但是聽(tīng)說(shuō)只支持IE瀏覽器；而FCKeditor在網(wǎng)上大名鼎鼎，是一個(gè)受關(guān)注非常高的開(kāi)源項目，并且能夠跨瀏覽器支持。因此我選擇FCKeditor。FCKeditor的最新版本是2.4，大家可以到
http://www.fckeditor.net/download這里下載，如下圖
下載并解壓縮到fckeditor文件夾，打開(kāi)該文件夾，我們可以看到如下文件及目錄：
其中_samples目錄下是示例，_testcases目錄下是測試用例，editor目錄下是編輯器的主要文件；此外，從該目錄中的文件不難看出，FCKeditor提供支持asp、php、perl、python等等各種服務(wù)器技術(shù)的版本，但不支持.net和Java Web。不過(guò)不要擔心，FCKeditor與Java Web之間的整合早就有人做好了，稍后我們就會(huì )用到。
了解瀏覽器技術(shù)的人都不難想到，Web編輯器其實(shí)應該是客戶(hù)端技術(shù)，它是通過(guò)JavaScript來(lái)控制頁(yè)面上的元素和通過(guò)彈出窗口來(lái)模擬對話(huà)框而做到的；只有在提交文章或者上傳文件的時(shí)候才需要跟服務(wù)器端交互。因此，要將該編輯器快速整合到項目中以看到效果，是非常簡(jiǎn)單的。
三、使用JavaScript整合FCKeditor
將剛剛解壓得到的fckeditor目錄拷貝到我們的項目中的src\main\webapp目錄下，打開(kāi)剛才建立的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類(lèi)，第四行就是利用該類(lèi)創(chuàng )建一個(gè)編輯器對象，而myTextArea是表單中文本區域的名字，在第六行，通過(guò)FCKeditor類(lèi)的ReplaceTextArea方法，文本區域就被替換成了Web編輯器。刷新頁(yè)面，就可以看到效果：
FCKeditor類(lèi)提供幾個(gè)基本屬性，可以讓我們對編輯器進(jìn)行簡(jiǎn)單的控制，它們是：
InstanceName：返回編輯器示例的名字
Width：設置編輯器的寬度，默認為100%
Height：設置編輯器的高度，默認值為200
ToolbarSet：設置編輯器的工具條集合，默認值為"default"，稍后會(huì )講到怎樣自定義工具條
Value：設置顯示在編輯器中的內容（包含HTML），默認值為空
BasePath：編輯器的目錄，一定要設置正確，否則編輯器會(huì )找不到它需要的文件，在本例中，由于我們直接將fckeditor目錄放到項目的根目錄下，因此設置為"fckeditor/"
CheckBrowser：設置是否檢測瀏覽器，默認為true
DisplayErrors：設置是否顯示錯誤信息，默認為true
此外，FCKeditor類(lèi)還有一個(gè)集合屬性
Config[ key ] = value，通過(guò)該集合屬性，我們可以進(jìn)行一個(gè)更高級的設置，如設置默認語(yǔ)言、更換皮膚等等。
綜上所述，下面的代碼將重新設置編輯器的高和寬、將工具條設置為基本工具條，將皮膚設置為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> 效果圖：
四、通過(guò)FCKeditor.java整合FCKeditor
使用JavaScript整合FCKeditor，我們很快就能看到編輯器的效果，并進(jìn)行文章的編輯。但是，在需要和服務(wù)器端進(jìn)行交互的時(shí)候（比如上傳圖片），就會(huì )出錯。因此，我們不得不在服務(wù)器端做一點(diǎn)手腳。這里，我們需要使用的是FCKeditor.java，其最新版本是2.3，還是在剛才的下載頁(yè)面，找到下載鏈接，如下圖：
將下載文件解壓，我們可以看到有doc目錄，有src目錄，甚至還有一個(gè)build.xml，讓我們可以重新構建項目；但是，這些我們統統都不需要，我們只要web\WEB-INF目錄下的東西，在這個(gè)目錄下，提供了一個(gè)web.xml，同時(shí)在lib目錄下提供了兩個(gè).jar文件，這便是全部?？吹竭@里，大家肯定能夠想到，Java Web項目的靈魂是什么？那就是web.xml。我們所要做的，就是把lib目錄下的兩個(gè).jar文件拷貝到我們項目的src/main/webapp/WEB-INF/lib下，同時(shí)將web.xml中的內容整合到我們項目的src/main/webapp/WEB-INF/web.xml中。
web.xml中的內容很簡(jiǎn)單，只定義了兩個(gè)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> 然后，我們就可以?huà)侀_(kāi)JavaScript，而在服務(wù)器端使用標簽來(lái)創(chuàng )建Web編輯器了。先在EditPosts.jsp中引入標簽庫：
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %> 再在原來(lái)放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> 刷新頁(yè)面，又見(jiàn)編輯器，此時(shí)，可以順利的上傳文件了。整合編輯器的任務(wù)到此完成。下一步，就是怎樣對編輯器進(jìn)行更多的控制了。
