基于ＦＣＫｅｄｉｔｏｒ多在線文本編輯器的設(shè)計(jì)

摘要：文章介紹了基于FCKeditor能自動(dòng)隱藏的在線文本編輯器的設(shè)計(jì)原理，并提供相關(guān)的主要代碼。該方法簡單有效，代碼可移植性非常好，用戶也可方便地根據(jù)不同需求做相應(yīng)的修改?；谶@種設(shè)計(jì)原理，對于其他的在線編輯器也可進(jìn)行相似的設(shè)計(jì)。

關(guān)鍵詞：在線文本編輯器；FCKeditor；自動(dòng)隱藏

中圖分類號：TP311文獻(xiàn)標(biāo)識碼：A文章編號：1009-3044(2008)24-1198-02

The Design of Multiply Text Editor for Internet Based on FCKeditor

RAO Yong-sheng1， WANG Ying2

(1.Institute of Educational Software， Guangzhou University， Guangzhou 510006， China; 2.South China Institute of Software Engineering， Guangzhou 510006， China)

Abstract: This article introduces the design theory of auto-hide about the editor for internet based on FCKeditor. And give the primary codes which make the online editor be auto-hiding. This method is simply， effective， and with good translated and expansibility. Based on this theory， we can do similar things to other online editor.

Key words: the text editor; FCKeditor; auto-hide

在建設(shè)具有交互性網(wǎng)站時(shí)，都允許用戶輸入數(shù)據(jù)，如發(fā)表評論、新增主題、發(fā)送信息等，而如今所輸入的數(shù)據(jù)所包含的不僅僅是文本信息，還包括圖片、鏈接、FLASH，甚至音頻和視頻等，這就不是HTML提供的TEXT或TEXTAREA所能完成的，一般的開發(fā)者都會(huì)使用第三方的在線編輯器來實(shí)現(xiàn)，這樣對開發(fā)者和用戶都極為方便。第三方的在線編輯器有很多，F(xiàn)CKeditor是其中一個(gè)使用較多、免費(fèi)的編輯器。

1 FCKeditor簡介

FCKeditor（FCKeditor主頁：http://www.fckeditor.net）是一個(gè)專門使用在網(wǎng)頁上屬于開放源代碼的所見即所得文字編輯器。它志于輕量化，不需要太復(fù)雜的安裝步驟即可使用，且不必在客戶端進(jìn)行任何方式的安裝。在所有的在線編輯器中，F(xiàn)CKeditor屬于目前互聯(lián)網(wǎng)上最好的編輯器之列，它功能強(qiáng)大，支持多種瀏覽器，無平臺限制，可以和ASP.NET、ASP、JSP、PHP等多種Web語言融合，多語言支持，開放源碼，擴(kuò)展方便，加載速度快等。

2 自動(dòng)隱藏在線多編輯器的需求

筆者開發(fā)一套英語自主學(xué)習(xí)平臺（http://www.gzjzes.net）時(shí)選擇了FCKeditor在線編輯器。在該平臺中，多處需要使用在線文本編輯器，尤其是教師用戶往題庫中增加題目時(shí)，需要多個(gè)文本框供教師輸入題目的相關(guān)信息，如：題目內(nèi)容、注釋、答案、解答過程等等。為了用戶界面的友好以及使用方便，這些文本框都采用所見即所得的方式，即需要為每個(gè)文本框注冊FCKeditor編輯器，然后由于需要的文本框較多，這就會(huì)影響頁面的加載速度，而且也會(huì)因?yàn)槊總€(gè)文本框都有工具欄使得頁面變得較復(fù)雜，用戶使用時(shí)也不方便，如圖1。

圖1 多個(gè)文本框

解決的辦法之一就是使用FCKeditor提供的同一頁面共享工具欄的功能，但是這種解決方案是多個(gè)文本框共同使用一個(gè)工具欄進(jìn)行文本編輯，對于經(jīng)常輸入數(shù)據(jù)，或頻繁編輯文本的用戶來說，顯得極為不方便。另外頁面也顯得不夠友好，對于初級用戶來說使用時(shí)也覺得有困難。筆者在開發(fā)英語自主學(xué)習(xí)平臺時(shí)就曾使用該辦法，用戶就反應(yīng)使用不方便。因?yàn)槎鄠€(gè)文本框共享一個(gè)工具欄就使得工具欄必然會(huì)離一些文本框較遠(yuǎn)，編輯時(shí)鼠標(biāo)需要來回長距離的移動(dòng)而帶來不便，也不直觀。

理想的效果應(yīng)該是：1）當(dāng)打開頁面時(shí)，除一個(gè)默認(rèn)的文本框的工具欄處于顯示狀態(tài)，其他的工具欄都設(shè)定為隱藏狀態(tài)，提高頁面加載速度；2）當(dāng)用戶在編輯某個(gè)文本框的內(nèi)容時(shí)，該文本框?qū)?yīng)的工具欄才顯示，而隱藏其他文本框的工具欄，這樣也使得其他文本框能顯示更多的內(nèi)容，以方便用戶瀏覽。如圖2。

3 自動(dòng)隱藏編輯器的原理

根據(jù)理想的效果，也就是當(dāng)文本框獲得焦點(diǎn)的時(shí)候，讓編輯器的工具欄顯示，而一旦文本框失去焦點(diǎn)，則隱藏工具欄。也就是在注冊FCKeditor編輯器時(shí)，為該編輯器添加獲得焦點(diǎn)時(shí)的響應(yīng)函數(shù)，在該函數(shù)里處理工具欄的顯示以及前一個(gè)獲得焦點(diǎn)的編輯器的工具欄隱藏工作。

4 自動(dòng)隱藏編輯器的實(shí)現(xiàn)

我們知道每個(gè)FCKeditor編輯器注冊完成時(shí)都會(huì)調(diào)用一個(gè)FCKeditor的API函數(shù)FCKeditor_OnComplete，因此基于上面的原理，只要在該函數(shù)里為編輯器添加獲得焦點(diǎn)的響應(yīng)函數(shù)。使用javascript的代碼如下：

圖2 能自動(dòng)隱藏工具欄的編輯器

＜script type=\"text/javascript\"＞

＜!--

var g_sCurrEditor = \"\";//全局變量，記錄當(dāng)前獲得焦點(diǎn)的編輯器名稱

function FCKeditor_OnComplete( editorInstance ) {

//設(shè)置編輯器獲得焦點(diǎn)的響應(yīng)函數(shù)

editorInstance.EditorDocument.body.onfocus =

function(){ focusChange( editorInstance.Name ); };

}

function focusChange( sInstanceName ) {

if( g_sCurrEditor !=sInstanceName ) {

var oEditor = FCKeditorAPI.GetInstance( sInstanceName );

oEditor.ToolbarSet.Expand();//展開工具欄

if( g_sCurrEditor != \"\" ){

var oEditor = FCKeditorAPI.GetInstance( g_sCurrEditor );

oEditor.ToolbarSet.Collapse();//關(guān)閉g_sCurrEditor的工具欄

}

g_sCurrEditor = sInstanceName;

}}

--＞

＜/script＞

在函數(shù)FCKeditor_OnComplete中設(shè)置編輯器獲得焦點(diǎn)的響應(yīng)函數(shù)，使得編輯器獲得焦點(diǎn)時(shí)就調(diào)用自定義函數(shù)focusChange。在函數(shù)focusChange中，首先判斷通過全局變量g_sCurrEditor記錄的當(dāng)前活動(dòng)編輯器與正獲得焦點(diǎn)的編輯器sInstanceName是否相同，如果不同，則展開編輯器sInstanceName的工具欄，然后通過編輯器的名稱g_sCurrEditor 與FCKeditor的API函數(shù)GetInstance獲得當(dāng)前活動(dòng)編輯器g_sCurrEditor的對象，通過對象則很容易讓其工具欄隱藏起來，最后修改當(dāng)前活動(dòng)編輯器名稱，即對變量g_sCurrEditor賦值。

加入上面代碼后，則可為任意頁面實(shí)現(xiàn)自動(dòng)隱藏編輯器功能，只需要在設(shè)計(jì)好頁面后直接注冊編輯器，圖2中的頁面注冊代碼如下：

＜script type=\"text/javascript\"＞

＜!--

//初始化控件

g_sCurrEditor = \"ta_note\";

RegistFCKeditorEX( \"ta_passage\"， 120， 1 );

RegistFCKeditorEX( \"ta_note\"， 120， true);

RegistFCKeditorEX( \"ta_content\"， 120， 1 );

RegistFCKeditorEX( \"ta_answer\"， 120， 1 );

RegistFCKeditorEX( \"ta_process\"， 120， 1 );

// RegistFCKeditorEX為筆者自定義函數(shù)，以方便注冊編輯器

…

＜/script＞

5 小結(jié)

在線編輯器的需求在網(wǎng)站建設(shè)中幾乎是必備的，而對于某些需輸入較多數(shù)據(jù)的網(wǎng)站，往往會(huì)需要多個(gè)文本編輯器，對此為了能加快頁面加載速度、方便用戶使用及界面的友好性，筆者提供的一種能自動(dòng)隱藏工具欄的方法，該方法簡單有效，提供的實(shí)現(xiàn)代碼可移植性非常好，另外基于這種設(shè)計(jì)原理，對于其他在線編輯器也可進(jìn)行相似的設(shè)計(jì)，達(dá)到自動(dòng)隱藏的目的。讀者可在此原理及實(shí)現(xiàn)上根據(jù)需要改動(dòng)代碼，以達(dá)到不同的效果，滿足各種不同需求，如某些文本框需要自動(dòng)隱藏而其他一直顯示等。文章沒有介紹如何使用FCKeditor，有興趣的讀者可在網(wǎng)上查閱，這方面的內(nèi)容很多。

參考文獻(xiàn)：

[1] FCKeditor官方網(wǎng)[EB/OL].http://www.fckeditor.net.

[2] 劉洪偉， 魏振鋼.一個(gè)網(wǎng)頁在線發(fā)布系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用研究，2002，19(3)：143-144.