首頁 > web前端 > css教學 > 主體

FCKeditor 實戰技巧_CSS/HTML

WBOY
發布: 2016-05-16 12:10:41
原創
1185 人瀏覽過

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

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

1、適時開啟編輯器

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

FCKeditor 實戰技巧_CSS/HTML

點選「Open Editor"按鈕後才開啟編輯器介面

FCKeditor 實戰技巧_CSS/HTML

實作原理:使用JAVASCRIPT版的FCK,在頁面載入時(未開啟FCK),建立一個隱藏的TextArea域,這個TextArea的name和ID要和建立的FCK實例名稱一致,接著點選"Open Editor"按鈕時,透過呼叫一段函數,使用FCK的ReplaceTextarea()方法來建立FCKeditor,程式碼如下:

複製程式碼


複製程式碼



複製程式碼


程式碼如下:



    
      oFCKeditor.BasePath = '/FCKeditor/' ;
      oFCKeditor.ToolbarSet = 'Basic' ;      oFCKeditor.ReplaceTextarea() ;     }     //--> >

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


複製程式碼

程式碼如下:


程式碼如下:

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:




此部分的詳細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版本:


複製代碼

代碼如下:調暗oFCKeditor
設定oFCKeditor = 新FCKeditor
使用oFCKeditor .BasePath = fckPath
.Config("ToolbarLocation") = "Out:fckTool
.Config("ToolbarLocation") = "Out:fckTool>Bar" cookies(site_sn)("issuper")="yes" 然後
.Config("LinkBrowser") = "true"
.Config("ImageBrowser") = "true"
.Config("FlashBrowser ") = "true"
.Config("LinkUpload") = "true"
.Config("ImageUpload") = "true"
.Config("FlashUpload") = "true"
end if
.ToolbarSet = "基本"
.Width = "100%"
.Height = "200"

.Value = ""
.建立"jcontent"
%>



JAVASCRIPT版本:


複製代碼
代碼如下:       var oFCKeditor = new FCKeditor( 'fbContent' ) ;     ] = true ;
      oFCKeditor. Config['ImageBrowser'] = true ;
      oFCKeditor.Config['FlashBrowser']     oFCKeditor.Config['ImageUpload' ] = true ;
      oFCKeditor.Config['FlashUpload'] = true ;       editor.Width = '100%' ;
      oFCKeditor.Height = '200' ;
      oFCKeditor.Value = '' ;
      oFCKeditor.Create() ;




相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板