FCKeditor 实战技巧

　　原文：http://3rgb.com，作者：柠檬园主

　　转载请保留此信息

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

　　1、适时打开编辑器

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

FCKeditor 实战技巧

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

FCKeditor 实战技巧

　　实现原理：使用JAVASCRIPT版的FCK，在页面加载时（未打开FCK），创建一个隐藏的TextArea域，这个TextArea的name和ID要和创建的FCK实例名称一致，然后点击"Open Editor"按钮时，通过调用一段函数，使用FCK的ReplaceTextarea()方法来创建FCKeditor，代码如下：

复制代码代码如下:

<!--

　　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要在同一个页面里用多个编辑器的话，得一个个创建，现在有了这个外联功能，就不用那么麻烦了，只需要把工具条放在一个适当的位置，后面就可以无限制的创建编辑域了，如图

FCKeditor 实战技巧

　　要实现这种功能呢，需要先在页面中定义一个工具条的容器：<div id="xToolbar"></div>，然后再根据这个容器的id属性进行设置。

　　ASP实现代码：

复制代码代码如下:

　　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实现代码：

复制代码代码如下:

　　FCKeditor 1:

<!--

　　// 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:

<!--

　　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() ;

教程首页更多教程