您好,欢迎访问一九零五行业门户网

FCKeditor 实战技巧_CSS/HTML

原文:http://3rgb.com,作者:柠檬园主
转载请保留此信息
fckeditor至今已经到了2.3.1版本了,对于国内的web开发者来说,也基本上都已经“闻风知多少”了,很多人将其融放到自己的项目中,更有很多大型的网站从中吃到了甜头。今天开始,我将一点点的介绍自己在使用fckeditor过程中总结的一些技巧,当然这些其实是fck本来就有的,只是很多人用fck的时候没发现而已 :p
1、适时打开编辑器
很多时候,我们在打开页面的时候不需要直接打开编辑器,而在用到的时候才打开,这样一来有很好的用户体验,另一方面可以消除fck在加载时对页面打开速度的影响,如图所示
点击“open editor按钮后才打开编辑器界面
实现原理:使用javascript版的fck,在页面加载时(未打开fck),创建一个隐藏的textarea域,这个textarea的name和id要和创建的fck实例名称一致,然后点击open editor按钮时,通过调用一段函数,使用fck的replacetextarea()方法来创建fckeditor,代码如下:
复制代码 代码如下:
textarea>
2、使用fckeditor 的 apifckeditor编辑器,提供了非常丰富的api,用于给end user实现很多想要定制的功能,比如最基本的数据验证,如何在提交的时候用js判断当前编辑器区域内是否有内容,fck的api提供了getlength()方法;
再比如如何通过脚本向fck里插入内容,使用inserthtml()等;
还有,在用户定制功能时,中间步骤可能要执行fck的一些内嵌操作,那就用executecommand()方法。
详细的api列表,请查看fckeditor的wiki。而常用的api,请查看fck压缩包里的_samples/html/sample08.html。此处就不贴代码了。
3、外联编辑条(多个编辑域共用一个编辑条)
这个功能是2.3版本才开始提供的,以前版本的fckeditor要在同一个页面里用多个编辑器的话,得一个个创建,现在有了这个外联功能,就不用那么麻烦了,只需要把工具条放在一个适当的位置,后面就可以无限制的创建编辑域了,如图
要实现这种功能呢,需要先在页面中定义一个工具条的容器:
,然后再根据这个容器的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:
fckeditor 2:
此部分的详细demo请参照_samples/html/sample11.html,_samples/html/sample11_frame.html4、文件管理功能、文件上传的权限问题
一直以后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' ) ;
ofckeditor.config['linkbrowser'] = true ;
      ofckeditor.config['imagebrowser'] = true ;
      ofckeditor.config['flashbrowser'] = true ;
      ofckeditor.config['linkupload'] = true ;
      ofckeditor.config['imageupload'] = true ;
      ofckeditor.config['flashupload'] = true ;
ofckeditor.toolbarset = 'basic' ;
      ofckeditor.width = '100%' ;
      ofckeditor.height = '200' ;
      ofckeditor.value = '' ;
      ofckeditor.create() ;
其它类似信息

推荐信息