快捷導(dǎo)航

FCKeditor 實(shí)戰(zhàn)技巧

更新時(shí)間：2006年09月25日 00:00:00 作者：

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

1、適時(shí)打開(kāi)編輯器
很多時(shí)候，我們?cè)诖蜷_(kāi)頁(yè)面的時(shí)候不需要直接打開(kāi)編輯器，而在用到的時(shí)候才打開(kāi)，這樣一來(lái)有很好的用戶體驗(yàn)，另一方面可以消除FCK在加載時(shí)對(duì)頁(yè)面打開(kāi)速度的影響，如圖所示

uploads/200609/22_174317_fckeditor01.gif

點(diǎn)擊「Open Editor"按鈕後才打開(kāi)編輯器界面

uploads/200609/22_174329_fckeditor02.gif

實(shí)現(xiàn)原理：使用JAVASCRIPT版的FCK，在頁(yè)面加載時(shí)（未打開(kāi)FCK），創(chuàng)建一個(gè)隱藏的TextArea域，這個(gè)TextArea的name和ID要和創(chuàng)建的FCK實(shí)例名稱一致，然後點(diǎn)擊"Open Editor"按鈕時(shí)，通過(guò)調(diào)用一段函數(shù)，使用FCK的ReplaceTextarea()方法來(lái)創(chuàng)建FCKeditor，代碼如下：

2、使用FCKeditor 的 API
FCKeditor編輯器，提供了非常豐富的API，用於給End User實(shí)現(xiàn)很多想要定制的功能，比如最基本的數(shù)據(jù)驗(yàn)證，如何在提交的時(shí)候用JS判斷當(dāng)前編輯器區(qū)域內(nèi)是否有內(nèi)容，F(xiàn)CK的API提供了GetLength()方法；

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

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

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

3、外聯(lián)編輯條（多個(gè)編輯域共用一個(gè)編輯條）
這個(gè)功能是2.3版本才開(kāi)始提供的，以前版本的FCKeditor要在同一個(gè)頁(yè)面裡用多個(gè)編輯器的話，得一個(gè)個(gè)創(chuàng)建，現(xiàn)在有了這個(gè)外聯(lián)功能，就不用那麼麻煩了，只需要把工具條放在一個(gè)適當(dāng)?shù)奈恢?，後面就可以無(wú)限制的創(chuàng)建編輯域了，如圖：

uploads/200609/22_174526_fckeditor03.gif

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

ASP實(shí)現(xiàn)代碼：

JAVASCRIPT實(shí)現(xiàn)代碼：

<div id="xToolbar"></div>
FCKeditor 1:
<script type="text/javascript">

</script>
<br />
FCKeditor 2:
<script type="text/javascript">

</script>\

此部分的詳細(xì)DEMO請(qǐng)參照：
_samples/html/sample11.html
_samples/html/sample11_frame.html

4、文件管理功能、文件上傳的權(quán)限問(wèn)題
一直以後FCKeditor的文件管理部分的安全是個(gè)值得注意，但很多人沒(méi)注意到的地方，雖然FCKeditor在各個(gè)Release版本中一直存在的一個(gè)功能就是對(duì)上傳文件類型進(jìn)行過(guò)濾，但是她沒(méi)考慮過(guò)另一個(gè)問(wèn)題：到底允許誰(shuí)能上傳？到底誰(shuí)能瀏覽服務(wù)器文件？

之前剛開(kāi)始用FCKeditor時(shí)，我就出現(xiàn)過(guò)這個(gè)問(wèn)題，還好NetRube（FCKeditor中文化以及FCKeditor ASP版上傳程序的作者）及時(shí)提醒了我，做法是去修改FCK上傳程序，在裡面進(jìn)行權(quán)限判斷，並且再在fckconfig.js裡把相應(yīng)的一些功能去掉。但隨之FCK版本的不斷升級(jí)，每升一次都要去改一次配置程序fckconfig.js，我發(fā)覺(jué)厭煩了，就沒(méi)什麼辦法能更好的控制這種配置麼？事實(shí)上，是有的。

在fckconfig.js裡面，有關(guān)於是否打開(kāi)上傳和瀏覽服務(wù)器的設(shè)置，在創(chuàng)建FCKeditor時(shí)，通過(guò)程序來(lái)判斷是否創(chuàng)建有上傳瀏覽功能的編輯器。首先，我先在fckconfig.js裡面把所有的上傳和瀏覽設(shè)置全設(shè)為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() ;

[最後編輯於 Admin, at 2006-09-22 18:49:12]