FCKeditor至今已經到了2.3.1版本了,對于國內的WEB開發者來說,也基本上都已經“聞風知多少”了,很多人將其融放到自己的項目中,更有很多大型的網站從中吃到了甜頭。今天開始,我將一點點的介紹自己在使用FCKeditor過程中總結的一些技巧,當然這些其實是FCK本來就有的,只是很多人用FCK的時候沒發現而已

1、適時打開編輯器

很多時候,我們在打開頁面的時候不需要直接打開編輯器,而在用到的時候才打開,這樣一來有很好的用戶體驗,另一方面可以消除FCK在加載時對頁面打開速度的影響,如圖所示


點擊“Open Editor"按鈕后才打開編輯器界面


實現原理:使用JAVASCRIPT版的FCK,在頁面加載時(未打開FCK),創建一個隱藏的TextArea域,這個TextArea的name和ID要和創建的FCK實例名稱一致,然后點擊"Open Editor"按鈕時,通過調用一段函數,使用FCK的ReplaceTextarea()方法來創建FCKeditor,代碼如下:

<script type="text/javascript">
     
<!--
     
function showFCK(){
      
var oFCKeditor = new FCKeditor( 'fbContent' ) ;
      oFCKeditor.BasePath 
= '/FCKeditor/' ;
      oFCKeditor.ToolbarSet 
= 'Basic' ;
      oFCKeditor.Width 
= '100%' ;
      oFCKeditor.Height 
= '200' ;
      oFCKeditor.ReplaceTextarea() ;
     }

     
//-->
     
</script>
     
<textarea name="fbContent" id="fbContent">textarea>


2、使用FCKeditor 的 API

FCKeditor編輯器,提供了非常豐富的API,用于給End User實現很多想要定制的功能,比如最基本的數據驗證,如何在提交的時候用JS判斷當前編輯器區域內是否有內容,FCK的API提供了GetLength()方法;

再比如如何通過腳本向FCK里插入內容,使用InsertHTML()等;

還有,在用戶定制功能時,中間步驟可能要執行FCK的一些內嵌操作,那就用ExecuteCommand()方法。

詳細的API列表,請查看FCKeditor的Wiki。而常用的API,請查看FCK壓縮包里的_samples/html/sample08.html。此處就不貼代碼了。



3、外聯編輯條(多個編輯域共用一個編輯條)

這個功能是2.3版本才開始提供的,以前版本的FCKeditor要在同一個頁面里用多個編輯器的話,得一個個創建,現在有了這個外聯功能,就不用那么麻煩了,只需要把工具條放在一個適當的位置,后面就可以無限制的創建編輯域了,如圖:


要實現這種功能呢,需要先在頁面中定義一個工具條的容器:<divid="xToolbar"></div>,然后再根據這個容器的id屬性進行設置。

<div id="xToolbar"></div> 
FCKeditor 1: 
<script type="text/javascript"> 
<!-- 
// Automatically calculates the editor base path based on the _samples directory. 
//
 This is usefull only for these samples. A real application should use something like this: 
//
 oFCKeditor.BasePath = '/fckeditor/' ; // '/fckeditor/' is the default value. 
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ; 

var oFCKeditor = new FCKeditor( 'FCKeditor_1' ) ; 
oFCKeditor.BasePath 
= sBasePath ; 
oFCKeditor.Height 
= 100 ; 
oFCKeditor.Config[ 'ToolbarLocation' ] 
= 'Out:parent(xToolbar)' ; 
oFCKeditor.Value 
= 'This is some <strong>sample text</strong>. You are using FCKeditor.' ; 
oFCKeditor.Create() ; 
//--> 
</script> 
<br /> 
FCKeditor 2: 
<script type="text/javascript"> 
<!-- 
oFCKeditor 
= new FCKeditor( 'FCKeditor_2' ) ; 
oFCKeditor.BasePath 
= sBasePath ; 
oFCKeditor.Height 
= 100 ; 
oFCKeditor.Config[ 'ToolbarLocation' ] 
= 'Out:parent(xToolbar)' ; 
oFCKeditor.Value 
= 'This is some <strong>sample text</strong>. You are using FCKeditor.' ; 
oFCKeditor.Create() ; 
//--> 
</script>