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

1、適時打開編輯器

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


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


實現(xiàn)原理：使用JAVASCRIPT版的FCK，在頁面加載時（未打開FCK），創(chuàng)建一個隱藏的TextArea域，這個TextArea的name和ID要和創(chuàng)建的FCK實例名稱一致，然后點擊"Open Editor"按鈕時，通過調(diào)用一段函數(shù)，使用FCK的ReplaceTextarea()方法來創(chuàng)建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實現(xiàn)很多想要定制的功能，比如最基本的數(shù)據(jù)驗證，如何在提交的時候用JS判斷當(dāng)前編輯器區(qū)域內(nèi)是否有內(nèi)容，F(xiàn)CK的API提供了GetLength()方法；

再比如如何通過腳本向FCK里插入內(nèi)容，使用InsertHTML()等；

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

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



3、外聯(lián)編輯條（多個編輯域共用一個編輯條）

這個功能是2.3版本才開始提供的，以前版本的FCKeditor要在同一個頁面里用多個編輯器的話，得一個個創(chuàng)建，現(xiàn)在有了這個外聯(lián)功能，就不用那么麻煩了，只需要把工具條放在一個適當(dāng)?shù)奈恢茫竺婢涂梢詿o限制的創(chuàng)建編輯域了，如圖：


要實現(xiàn)這種功能呢，需要先在頁面中定義一個工具條的容器：<divid="xToolbar"></div>，然后再根據(jù)這個容器的id屬性進行設(shè)置。

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