在項(xiàng)目中整合FCKeditor

goldbomb 2007-03-15

展開(kāi)全文

Web 2.0時(shí)代時(shí)代的Web項(xiàng)目，是無(wú)論如何也少不了一個(gè)在線編輯器的，因此在我們的項(xiàng)目中整合一個(gè)Web編輯器就顯得至關(guān)重要。在這里，我依然以前面的xkland項(xiàng)目為例，來(lái)探討在項(xiàng)目中整合FCKeditor的方方面面。

一、關(guān)于用戶發(fā)表文章的功能設(shè)計(jì)

　　用戶發(fā)表文章的功能，大家見(jiàn)過(guò)不少，也用過(guò)不少，最簡(jiǎn)單的，莫過(guò)于提供一個(gè)文本框，數(shù)據(jù)提交后直接寫入數(shù)據(jù)庫(kù)了事，稍復(fù)雜一點(diǎn)的最少也要提供一個(gè)輸入標(biāo)題和選擇分類的功能。當(dāng)然，我們也可以把我們的功能設(shè)計(jì)得更有特色。在這個(gè)示例項(xiàng)目中，我假設(shè)開(kāi)發(fā)的是一個(gè)以圖文為中心的網(wǎng)絡(luò)社區(qū)，我們每一篇文章都需要用戶在它上傳的圖片中選擇一個(gè)作為主題圖片，那么，在網(wǎng)站首頁(yè)的文章列表上，大家看到的將不僅僅只是一個(gè)文字的標(biāo)題，還有主題圖片的縮略圖。

　　先來(lái)看看數(shù)據(jù)表的結(jié)構(gòu)，創(chuàng)建數(shù)據(jù)表的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字段為文章分類，subject字段為標(biāo)題，content字段為正文。比較特殊的是pictures字段和mainpicture字段，pictures保存文章中包含的所有圖片的url，以“|”符號(hào)分割，如“001.jpg|002.jpg|003.jpg...”，而mainpicture就是主題圖片的url了。有人會(huì)問(wèn)：“保存主題圖片的url就夠了，為什么還要保存所有的圖片url呢？”，這樣設(shè)計(jì)主要是為了考慮到用戶有時(shí)候會(huì)修改文章，重新選擇別的圖片作為主題圖片，這個(gè)時(shí)候pictures字段就派上用場(chǎng)了，因?yàn)樗梢韵蛴脩籼峁┖蜻x項(xiàng)。

　　這樣的功能設(shè)計(jì)應(yīng)該提供如下的用戶界面，該頁(yè)面文件名為EditPosts.jsp：

　　在這里，我們還沒(méi)有Web編輯器可用，暫時(shí)用一個(gè)文本區(qū)域代替。

二、初識(shí)FCKeditor

　　在聽(tīng)說(shuō)FCKeditor之前，我用過(guò)一個(gè)在線編輯器eWebEditor，提供ASP/JSP/PHP等好幾個(gè)版本，功能是非常的好，文檔也很詳細(xì)，但是聽(tīng)說(shuō)只支持IE瀏覽器；而FCKeditor在網(wǎng)上大名鼎鼎，是一個(gè)受關(guān)注非常高的開(kāi)源項(xiàng)目，并且能夠跨瀏覽器支持。因此我選擇FCKeditor。FCKeditor的最新版本是2.4，大家可以到
http://www./download這里下載，如下圖

　　下載并解壓縮到fckeditor文件夾，打開(kāi)該文件夾，我們可以看到如下文件及目錄：

　　其中_samples目錄下是示例，_testcases目錄下是測(cè)試用例，editor目錄下是編輯器的主要文件；此外，從該目錄中的文件不難看出，F(xiàn)CKeditor提供支持asp、php、perl、python等等各種服務(wù)器技術(shù)的版本，但不支持.net和Java Web。不過(guò)不要擔(dān)心，F(xiàn)CKeditor與Java Web之間的整合早就有人做好了，稍后我們就會(huì)用到。

　　了解瀏覽器技術(shù)的人都不難想到，Web編輯器其實(shí)應(yīng)該是客戶端技術(shù)，它是通過(guò)JavaScript來(lái)控制頁(yè)面上的元素和通過(guò)彈出窗口來(lái)模擬對(duì)話框而做到的；只有在提交文章或者上傳文件的時(shí)候才需要跟服務(wù)器端交互。因此，要將該編輯器快速整合到項(xiàng)目中以看到效果，是非常簡(jiǎn)單的。

三、使用JavaScript整合FCKeditor

　　將剛剛解壓得到的fckeditor目錄拷貝到我們的項(xiàng)目中的src\main\webapp目錄下，打開(kāi)剛才建立的EditPosts.jsp，加入如下代碼：

< 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)建一個(gè)編輯器對(duì)象，而myTextArea是表單中文本區(qū)域的名字，在第六行，通過(guò)FCKeditor類的ReplaceTextArea方法，文本區(qū)域就被替換成了Web編輯器。刷新頁(yè)面，就可以看到效果：

　　FCKeditor類提供幾個(gè)基本屬性，可以讓我們對(duì)編輯器進(jìn)行簡(jiǎn)單的控制，它們是：

　　InstanceName：返回編輯器示例的名字
　　Width：設(shè)置編輯器的寬度，默認(rèn)為100%
　　Height：設(shè)置編輯器的高度，默認(rèn)值為200
　　ToolbarSet：設(shè)置編輯器的工具條集合，默認(rèn)值為"default"，稍后會(huì)講到怎樣自定義工具條
　　Value：設(shè)置顯示在編輯器中的內(nèi)容（包含HTML），默認(rèn)值為空
　　BasePath：編輯器的目錄，一定要設(shè)置正確，否則編輯器會(huì)找不到它需要的文件，在本例中，由于我們直接將fckeditor目錄放到項(xiàng)目的根目錄下，因此設(shè)置為"fckeditor/"
　　CheckBrowser：設(shè)置是否檢測(cè)瀏覽器，默認(rèn)為true
　　DisplayErrors：設(shè)置是否顯示錯(cuò)誤信息，默認(rèn)為true

　　此外，F(xiàn)CKeditor類還有一個(gè)集合屬性Config[ key ] = value，通過(guò)該集合屬性，我們可以進(jìn)行一個(gè)更高級(jí)的設(shè)置，如設(shè)置默認(rèn)語(yǔ)言、更換皮膚等等。

　　綜上所述，下面的代碼將重新設(shè)置編輯器的高和寬、將工具條設(shè)置為基本工具條，將皮膚設(shè)置為office2003樣式：

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ì)出錯(cuò)。因此，我們不得不在服務(wù)器端做一點(diǎn)手腳。這里，我們需要使用的是FCKeditor.java，其最新版本是2.3，還是在剛才的下載頁(yè)面，找到下載鏈接，如下圖：

　　將下載文件解壓，我們可以看到有doc目錄，有src目錄，甚至還有一個(gè)build.xml，讓我們可以重新構(gòu)建項(xiàng)目；但是，這些我們統(tǒng)統(tǒng)都不需要，我們只要web\WEB-INF目錄下的東西，在這個(gè)目錄下，提供了一個(gè)web.xml，同時(shí)在lib目錄下提供了兩個(gè).jar文件，這便是全部?？吹竭@里，大家肯定能夠想到，Java Web項(xiàng)目的靈魂是什么？那就是web.xml。我們所要做的，就是把lib目錄下的兩個(gè).jar文件拷貝到我們項(xiàng)目的src/main/webapp/WEB-INF/lib下，同時(shí)將web.xml中的內(nèi)容整合到我們項(xiàng)目的src/main/webapp/WEB-INF/web.xml中。

　　web.xml中的內(nèi)容很簡(jiǎn)單，只定義了兩個(gè)Servlet映射，并且對(duì)上傳文件的目錄和允許哪些文件上傳、拒絕哪些文件上傳做了設(shè)置，如下：

<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>

　　然后，我們就可以拋開(kāi)JavaScript，而在服務(wù)器端使用標(biāo)簽來(lái)創(chuàng)建Web編輯器了。先在EditPosts.jsp中引入標(biāo)簽庫(kù)：

<%@ taglib uri="http:///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./fckeditor/">FCKeditor</a>.

</FCK:editor>

　　刷新頁(yè)面，又見(jiàn)編輯器，此時(shí)，可以順利的上傳文件了。整合編輯器的任務(wù)到此完成。下一步，就是怎樣對(duì)編輯器進(jìn)行更多的控制了。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： goldbomb > 《FCKeditor》

舉報(bào)/認(rèn)領(lǐng)