FCKeditor 實戰技巧_CSS/HTML

原文：http://3rgb.com，作者：檸檬園主
轉載請保留此資訊

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

1、適時開啟編輯器

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

點擊“Open Editor"按鈕後才開啟編輯器介面

實現原理：使用JAVASCRIPT版的FCK，在頁面載入時（未開啟FCK），建立一個隱藏的TextArea域，這個TextArea的name和ID要和建立的FCK執行個體名稱一致，然後點擊"Open Editor"按鈕時，通過調用一段函數，使用FCK的ReplaceTextarea()方法來建立FCKeditor，代碼如下：
複製代碼 代碼如下:

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要在同一個頁面裡用多個編輯器的話，得一個個建立，現在有了這個外聯功能，就不用那麼麻煩了，只需要把工具條放在一個適當的位置，後面就可以無限制的建立編輯域了，

要實現這種功能呢，需要先在頁面中定義一個工具條的容器：，然後再根據這個容器的id屬性進行設定。

ASP實現代碼：
複製代碼 代碼如下:

<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
with oFCKeditor
.BasePath = fckPath
.Config("ToolbarLocation") = "Out:fckToolBar"

.ToolbarSet = "Basic"
.Width = "100%"
.Height = "200"

.Value = ""
.Create "jcontent"

.Height = "150"
.Value = ""
.Create "jreach"
end with
%>

JAVASCRIPT實現代碼：
複製代碼 代碼如下:

FCKeditor 1:



FCKeditor 2:


此部分的詳細DEMO請參照_samples/html/sample11.html，_samples/html/sample11_frame.html

4、檔案管理功能、檔案上傳的許可權問題

一直以後FCKeditor的檔案管理部分的安全是個值得注意，但很多人沒注意到的地方，雖然FCKeditor在各個Release版本中一直存在的一個功能就是對上傳檔案類型進行過濾，但是她沒考慮過另一個問題：到底允許誰能上傳？到底誰能瀏覽伺服器檔案？

之前剛開始用FCKeditor時，我就出現過這個問題，還好NetRube（FCKeditor中文化以及FCKeditor ASP版上傳程式的作者）及時提醒了我，做法是去修改FCK上傳程式，在裡面進行許可權判斷，並且再在fckconfig.js裡把相應的一些功能去掉。但隨之FCK版本的不斷升級，每升一次都要去改一次配置程式fckconfig.js，我發覺厭煩了，就沒什麼辦法能更好的控制這種配置嗎？事實上，是有的。

在fckconfig.js裡面，有關於是否開啟上傳和瀏覽伺服器的設定，在建立FCKeditor時，通過程式來判斷是否建立有上傳瀏覽功能的編輯器。首先，我先在fckconfig.js裡面把所有的上傳和瀏覽設定全設為false，接著我使用的代碼如下：

ASP版本：
複製代碼 代碼如下:
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
with oFCKeditor
.BasePath = fckPath
.Config("ToolbarLocation") = "Out:fckToolBar"

if request.cookies(site_sn)("issuper")="yes" then
.Config("LinkBrowser") = "true"
.Config("ImageBrowser") = "true"
.Config("FlashBrowser") = "true"
.Config("LinkUpload") = "true"
.Config("ImageUpload") = "true"
.Config("FlashUpload") = "true"
end if
.ToolbarSet = "Basic"
.Width = "100%"
.Height = "200"

.Value = ""
.Create "jcontent"
%>

JAVASCRIPT版本：
複製代碼 代碼如下:
var oFCKeditor = new FCKeditor( 'fbContent' ) ;
<%if power = powercode then%>
oFCKeditor.Config['LinkBrowser'] = true ;
oFCKeditor.Config['ImageBrowser'] = true ;
oFCKeditor.Config['FlashBrowser'] = true ;
oFCKeditor.Config['LinkUpload'] = true ;
oFCKeditor.Config['ImageUpload'] = true ;
oFCKeditor.Config['FlashUpload'] = true ;
<%end if%>
oFCKeditor.ToolbarSet = 'Basic' ;
oFCKeditor.Width = '100%' ;
oFCKeditor.Height = '200' ;
oFCKeditor.Value = '' ;
oFCKeditor.Create() ;

