FCKeditor practical skills_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，程式碼如下：

複製程式碼

複製程式碼

複製程式碼


程式碼如下:



    

     //--> >
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實作程式碼：複製程式碼

程式碼如下:

程式碼如下:


div

Dim oFCKeditor
Set oFCKeditor = New FCKeditor
with oFCKeditor
.BasePath = fckPath🎜>.Config("Toolbar🎜>.BasePath = fckPath🎜>.Config("Toolbar🎜>.BasePath = fckPath🎜>.Config("Toolbar🎜>.BasePath = fckPath🎜>.Config("Toolbar🎜>.BasePath = fckPath🎜>.Config("Toolbar🎜>.BasePath = fckPath🎜>.Config("Toolbar🎜>.BasePath = fckPath🎜>.Config("Toolbar🎜>。 = "Out:fckToolBar"

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

.m = ""
.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() ;