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

1、适时打开编辑器

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


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


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


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

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