FCKeditor 實戰技巧

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

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

點擊「Open Editor"按鈕後才打開編輯器界面
uploads/200609/22_174329_fckeditor02.gif

實現原理:使用JAVASCRIPT版的FCK,在頁面加載時(未打開FCK),創建一個隱藏的TextArea域,這個TextArea的name和ID要和創建的FCK實例名稱一致,然後點擊"Open Editor"按鈕時,通過調用一段函數,使用FCK的ReplaceTextarea()方法來創建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實現很多想要定制的功能,比如最基本的數據驗證,如何在提交的時候用JS判斷當前編輯器區域內是否有內容,FCK的API提供了GetLength()方法;

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

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

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

3、外聯編輯條(多個編輯域共用一個編輯條)
這個功能是2.3版本才開始提供的,以前版本的FCKeditor要在同一個頁面裡用多個編輯器的話,得一個個創建,現在有了這個外聯功能,就不用那麼麻煩了,只需要把工具條放在一個適當的位置,後面就可以無限制的創建編輯域了,如圖:
uploads/200609/22_174526_fckeditor03.gif

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

ASP實現代碼:
<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實現代碼:
<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、文件管理功能、文件上傳的權限問題
一直以後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() ;
[最後編輯於 Admin, at 2006-09-22 18:49:12]
更多精彩内容其他人还在看

Win XP系统语言栏丢失解决三例

案例一:   问:一台计算机使用Windows XP操作系统,最近任务栏内无法显示语言栏,我通过“区域和语言选项”里的设置找回了语言栏,重新启动计算机后,问题依旧,请问是什么问题造成的?
收藏 0 赞 0 分享

设计软件中的系统字体应用小技巧

大家都知道,在操作系统的安装目录下有字体库,要使用种字体首先需要安装,但是这会造成字体占用系统盘空间过多。设计使用的字体都不少,怎么说也有几个G,很占资源,下面教大家一个稍微节省资源的方法。
收藏 0 赞 0 分享

Access中字段上自动打开的输入法的解决方法

打开Access数据库时,在里面数据表字段输入数值时,总是会跳出输入法来,很是烦人,在网上找了一下,找到了相应的解决办法:
收藏 0 赞 0 分享

“internet explore 无法打开internet站点 已终止操作”的解决方法

在IE下,当页面还没有加载完全时,如果正在执行的JS代码中含有使用了document.createElement的话,很容易引起页面加载失败.导致提示"internet explore 无法打开internet站点 http://www.xxx.com/xxx/xxx.
收藏 0 赞 0 分享

十个习惯让你精通新的开发技术

这篇文章,是从我的《高效开发人员的五个特征》一文中抽出的一个观点。从我自身的事业和习惯中,我考虑了很多方式怎么样才能有效地学习。
收藏 0 赞 0 分享

小谈RADMIN爆破

最近做渗透测试时常碰到RADMIN一类的东西.. 一碰到此类的程序,一般我都会先看下对方把RADMIN的端口配置成什么..以及相应的PASS(加密过的)
收藏 0 赞 0 分享

动易2006序列号破解算法公布

动易2007就快发布了,把2006的算法公开吧,赚点人气,希望动易不要来找我 。
收藏 0 赞 0 分享

联众密码的逆向算法公布

闲来无事,每天上联众,联众的密码经过加密后保存在本地注册表里,看看是怎么加密的。下了个ollydbg,一路跟踪,发现算法极其简单,给出Delphi版本的解密算法(加密部分有兴趣的一起来讨论)。算法比较粗糟,谁帮优化一下:)
收藏 0 赞 0 分享

关于三种主流WEB架构的思考

做WEB好几年了,各种语言和技术都稍有涉猎。今天心血来潮,突然想总结一下。其实不论什么技术,什么需求,通常WEB开发就是通过WEB前端管理一个或大或小或独立或分布式的关系型数据库,很多东西都是相通的。这里说的WEB架构,是指WEB应用开发中每种技术独有的资源组织形式(包括文件,数
收藏 0 赞 0 分享

一篇关于程序员性格的文章第1/3页

软件开发中人们很少注意个人性格问题。自从 1965年Edsger Dijkstra的有里程碑意义的文章“程序开发是一种人类活动”发表以来,程序员性格被认为是合理的和有成效的研究领域,虽然有些题目如“大桥建筑者的心理”和“对律师行为的研究实验”看起来可能是荒唐的,而在计算机领域,“
收藏 0 赞 0 分享
查看更多