四大FCKeditor 实战应用技巧

FCKeditor至今已经到了 2.3.1 版本了,对于国内的WEB开发者来说,也基本上都已经“闻风知多少”了,很多人将其融放到自己的项目中,更有很多大型的网站从中吃到了甜头。今天开始,我将一点点的介绍自己在使用FCKeditor过程中总结的一些技巧,当然这些其实是FCK本来就有的,只是很多人用FCK的时候没发现而已 :

  1、适时打开编辑器

  很多时候,我们在打开页面的时候不需要直接打开编辑器,而在用到的时候才打开,这样一来有很好的用户体验,另一方面可以消除FCK在加载时对页面打开速度的影响,如图所示

  点击“Open Editor"按钮后才打开编辑器界面

四大FCKeditor 实战应用技巧_第1张图片

  实现原理:使用JAVASCRIPT版的FCK,在页面加载时(未打开FCK),创建一个隐藏的TextArea域,这个TextAreanameID要和创建的FCK实例名称一致,然后点击"Open Editor"按钮时,通过调用一段函数,使用FCKReplaceTextarea()方法来创建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判断当前编辑器区域内是否有内容,FCKAPI提供了GetLength()方法;

  再比如如何通过脚本向FCK里插入内容,使用InsertHTML()等;

  还有,在用户定制功能时,中间步骤可能要执行FCK的一些内嵌操作,那就用ExecuteCommand()方法。

  详细的API列表,请查看FCKeditorWiki。而常用的API,请查看FCK压缩包里的_samples/html/sample08.html。此处就不贴代码了。

 3、外联编辑条(多个编辑域共用一个编辑条)

  这个功能是2.3版本才开始提供的,以前版本的FCKeditor要在同一个页面里用多个编辑器的话,得一个个创建,现在有了这个外联功能,就不用那么麻烦了,只需要把工具条放在一个适当的位置,后面就可以无限制的创建编辑域了,如图:

四大FCKeditor 实战应用技巧_第2张图片

  要实现这种功能呢,需要先在页面中定义一个工具条的容器:<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时,我就出现过这个问题,还好NetRubeFCKeditor中文化以及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() ;

v

你可能感兴趣的:(四大FCKeditor 实战应用技巧)