FCKeditor实用技巧

原文：http://3rgb.com，作者：柠檬园丁转载，请保留此信息。到目前为止，FCKeditor已经达到了2.3.1版本。对于国内的WEB开发者来说，基本上已经“知情”了。很多人把它投入到自己的项目中，很多大型网站都从中受益。一开始我会介绍一些我在使用FCKeditor的过程中总结出来的技巧。当然，这些技能是FCK固有的，但是很多人在使用FCK的时候没有发现。P1。在正确的时间打开编辑器。很多时候，我们打开页面的时候不需要直接打开编辑器，只需要在使用的时候打开，这样就有了很好的用户体验。另一方面，我们可以消除加载时FCK对页面打开速度的影响，如图()。

打开编辑器界面前，点击“打开编辑器”按钮。

实现原理：页面加载时(FCK未打开)，使用JAVASCRIPT版本的FCK创建一个hIDden TextArea字段。这个文本区域的名称和id应该与创建的FCK实例的名称一致。然后当你点击“打开编辑器”按钮时，你可以调用一个函数。使用FCK的ReplaceTextarea()方法创建FCKeditor，代码如下：复制代码的代码如下： script type=' text/JavaScript '！-函数showFCK(){ var of keditor=new FCKeditor(' fbContent ')；oFCKeditor。base path='/FCKeditor/'；oFCKeditor。工具栏集=“基本”；oFCKeditor。宽度=' 100% '；oFCKeditor。高度=' 200 '；oFCKeditor。ReplaceTextarea()；}/////script textarename=' fbcontent ' id=' fbcontent ' textarea 2，使用FCKeditor的APIFCKeditor编辑器，提供了非常丰富的API，用来实现很多终端用户想要定制的功能，比如最基础的数据验证，提交时如何使用JS判断当前编辑器区域是否有内容，FCK的API提供了GetLength()方法；比如如何通过脚本将内容插入FCK，使用InsertHTML()，等等。此外，当用户定制函数时，FCK的一些嵌入式操作可能需要在中间步骤执行，所以使用ExecuteCommand()方法。有关API的详细列表，请参见FCKeditor的维基。常用的API参见FCK压缩包中的_samples/html/sample08.html。代码不会发布在这里。3.外展编辑栏(多个编辑栏共享一个编辑栏)该功能仅在2.3版中提供。如果以前版本的FCKeditor在同一个页面上使用了多个编辑器，就必须逐个创建。现在有了这个外展功能，就不会那么麻烦了。只需将工具栏放在适当的位置，就可以无限期地创建编辑字段，如图所示。

要实现这种功能呢，需要先在页面中定义一个工具条的容器：div id='xToolbar'/div，然后再根据这个容器的编号属性进行设置ASP。实现代码：复制代码代码如下： div id=' fckToolBar '/div % Dim of keditor of keditor=新的带有凯迪托的的FCKeditor .基本路径=fckPath .配置('工具栏位置)='Out:fckToolBar ' .工具栏集="基本"。宽度='100% '。高度='200 '。值=' '。创建内容.高度='150 '。值=' '。用% JAVASCRIPT创建“jreach”结尾实现代码：复制代码代码如下： div id=' Xtoolbar '/div FCKeditor 1:脚本类型='text/javascript '！- //根据样本(_ s)目录自动计算编辑器基本路径。//这仅适用于这些样本。一个真正的应用程序应该使用类似于keditor的：/这样的东西基本路径='/fckeditor/'；//'/fckeditor/'是默认值var sBasePath=document。位置。路径名。子字符串(0，文档。位置。路径名。的最后一个索引(' _ samples ')；keditor的var=新的FCKeditor(' FCKeditor _ 1 ')；凯迪托的.BasePath=sBasePathoFCKeditor .高度=100;凯迪托的.config['工具栏位置']=' out : ParaMeter(Xtoolbar)'；凯迪托的.值='这是一些强烈的示例文本/strong。您正在使用FCKeditor '；凯迪托的.create()；/////脚本br/FCKeditor 2:脚本类型='text/javascript '！-of keditor=new FCKeditor(' FCKeditor _ 2 ')；凯迪托的.BasePath=sBasePathoFCKeditor .高度=100;凯迪托的.config['工具栏位置']=' out : ParaMeter(Xtoolbar)'；凯迪托的.值='这是一些强烈的示例文本/strong .'您正在使用FCKeditor '；凯迪托的.create()；////脚本此部分的详细演示请参照_samples/html/sample11.html、_ samples/html/sample 11 _ frame。html 4，文件管理功能、文件上传的权限问题一直以后FCKeditor的文件管理部分的安全是个值得注意，但很多人没注意到的地方，虽然FCKeditor在各个释放；排放；发布版本中一直存在的一个功能就是对上传文件类型进行过滤，但是她没考虑过另一个问题：到底允许谁能上传？到底谁能浏览服务器文件？之前刚开始用FCKeditor时，我就出现过这个问题，还好NetRube(FCKeditor中文化以及FCKeditor ASP版上传程序的作者)及时提醒了我，做法是去修改FCK上传程序，在里面进行权限判断，并且再在fckconfig.js里把相应的一些功能去掉。但随之FCK版本的不断升级，每升一次都要去改一次配置程序fckconfig.js，我发觉厌烦了，就没什么办法能更好的控制这种配置么？事实上，是有的。在fckconfig.js里面，有关于是否打开上传和浏览服务器的设置，在创建FCKeditor时，通过程序来判断是否创建有上传浏览功能的编辑器。首先，我先在fckconfig.js里面把所有的上传和浏览设置全设为假的，接着我使用的代码如下：ASP版本：复制代码代码如下：%的副本集=带有副本集的新副本集BasePath=fckPath .如果需要，配置('工具栏位置')=' out : fcktoolbar'。cookies(site _ sn)(“issuper”)=“yes”则。配置("链接浏览器")="真"。Config('ImageBrowser')='true ' .配置(' FlashBrowser')='true ' .Config('LinkUpload')='true ' .Config('ImageUpload')='true ' .config(' FlashUpload ')=' true '结束if .工具栏集="基本"。宽度='100% '。高度='200 '。值=' '。创建jcontent“% JAVAScript版本：复制代码代码如下keditor的： var=新的FCKeditor(' FBContent ')；%如果power=powercode，则%的客户.config['链接浏览器']=true；凯迪托的.config[' ImageBrowser ']=true；凯迪托的.config[' FlashBrowser ']=true；凯迪托的.config[' LinkUpload ']=true；凯迪托的.config[' ImageUpload ']=true；凯迪托的.config[' FlashUpload ']=true；% end if % oFCKeditor .工具栏集="基本";凯迪托的.宽度=' 100% ';凯迪托的.高度=' 200 ';凯迪托的.值=' ';凯迪托的.create()；