佳木斯湛栽影视文化发展公司

主頁 > 知識庫 > FCKeditor 實戰(zhàn)技巧

FCKeditor 實戰(zhàn)技巧

熱門標簽:鐵路電話系統(tǒng) 檢查注冊表項 銀行業(yè)務 呼叫中心市場需求 服務器配置 智能手機 美圖手機 網(wǎng)站文章發(fā)布

原文:http://3rgb.com,作者:檸檬園主
轉(zhuǎn)載請保留此信息

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

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判斷當前編輯器區(qū)域內(nèi)是否有內(nèi)容,F(xiàn)CK的API提供了GetLength()方法;

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

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

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

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

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

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

ASP實現(xiàn)代碼:

復制代碼 代碼如下:

div id="fckToolBar">/div>
%
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實現(xiàn)代碼:
復制代碼 代碼如下:

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>

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

4、文件管理功能、文件上傳的權(quán)限問題

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

之前剛開始用FCKeditor時,我就出現(xiàn)過這個問題,還好NetRube(FCKeditor中文化以及FCKeditor ASP版上傳程序的作者)及時提醒了我,做法是去修改FCK上傳程序,在里面進行權(quán)限判斷,并且再在fckconfig.js里把相應的一些功能去掉。但隨之FCK版本的不斷升級,每升一次都要去改一次配置程序fckconfig.js,我發(fā)覺厭煩了,就沒什么辦法能更好的控制這種配置么?事實上,是有的。

在fckconfig.js里面,有關(guān)于是否打開上傳和瀏覽服務器的設置,在創(chuàng)建FCKeditor時,通過程序來判斷是否創(chuàng)建有上傳瀏覽功能的編輯器。首先,我先在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() ;

您可能感興趣的文章:
  • 詳解python進行mp3格式判斷
  • 詳解python進行mp3格式判斷
  • 關(guān)于Linux操作系統(tǒng)下終端亂碼的完美解決方法

標簽:河南 滄州 樂山 紅河 新疆 上海 長治 沈陽

巨人網(wǎng)絡通訊聲明:本文標題《FCKeditor 實戰(zhàn)技巧》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    秦皇岛市| 甘孜县| 华坪县| 湘潭市| 开江县| 八宿县| 仁怀市| 荆州市| 抚顺县| 镇宁| 平果县| 乌兰浩特市| 合江县| 彭州市| 郓城县| 孟连| 安阳市| 庄河市| 罗田县| 疏勒县| 石景山区| 剑河县| 宝清县| 双辽市| 嵊泗县| 霞浦县| 岳阳县| 城步| 玉田县| 金门县| 广饶县| 赣州市| 六安市| 肥东县| 汉川市| 天长市| 霍城县| 九寨沟县| 东至县| 荔浦县| 石泉县|