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,代码如下:

复制代码 代码如下:

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

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

时间: 2024-12-30 01:32:32

FCKeditor 实战技巧_CSS/HTML的相关文章

用户体验设计师:草图原型实战技巧

文章描述:凌乱中的艺术 - 草图原型实战技巧. 五年时间转瞬即逝,在自己小窝的最后一个周末:眼看着家当和心情都被打包的差不多了,整个人却终于感冒发烧腹泻垮了下来,这是闹哪样呢.所幸本周前面几天可以抽出些时间做掉这篇译文,今天发掉先.接下来的两个月,大概要集中业余零散精力放在一本iOS书的翻译上了:希望还能有些时间分给这边.杂七杂八就到这里,我们直接进入正文--草图原型实战技巧,没有务虚的大道理,每个内容要点都很实用.走着. 在如今的用户体验及产品圈子里,越来越多的人开始了解到草图及相关的原型工作

如何做高质量有相关性的外链实战技巧

百度外链算法,去年和今年是一波三折,算法始终在变,批量垃圾软文.签名.不相关外链都在被惩罚的范围内,搞得我们SEO焦头烂额,感觉都不会再发外链了,不过这样我们的外链就不做了吗?我个人觉得不合适,没有外链来推动排名,仅靠内容来推是不科学的!!太费时间费力气了有木有!!那么要怎么样做外链才能推动排名而不被百度厌烦呢?只有费点时间去做高质量有相关的外链,做有价值的外链,做百度需要的外链.下面我就给大家说道说道: 论坛和博客 我这是凑字数吗?不是,是给新人看的,老人家可以往后看,论坛找相关的论坛,或者相

对百度知道100%成功留外链实战技巧的补充

今天早上在A5上面看到<百度知道100%成功留外链实战技巧>就立刻被吸引了,因为捷乐自动门也是挺喜欢通过百度知道来做外链的,虽然有些时候回答的问题带了连接,但是有些时候带了外链又通过不了审核.然后就带着好奇又激动的心情看了这篇文章.确实这篇文章里面提到的方法都很新颖,想到这些办法的seo也很聪明.然后捷乐自动门也试了一下,发现有几个问题,在这里想补充一下. 1.百度是不会屏蔽自己的链接,但是如果最近几天,你用的号发的链接比较多,即使是发百度知道的链接也照样通过不了. 捷乐自动门之前测试过,上个

台上一分钟台下十年功 也说SEO实战技巧

"赚小钱靠技术,赚更多钱靠技巧",因此,网赚人士与SEOER们十分在意学习各种高效的实战型"小技巧".的确,任何行业都存在一些事半功倍的小技巧,如果掌握了更多这样的小技巧,在工作中少走弯路,甚至一招致胜,这是人最正常不过的心愿.   网络上,各种"SEO小技巧"都是永恒的话题 从另一方面来说,大家对于各种实战小技巧的青睐,也正反映了更多人对"与实践脱节"之各种死板理论的厌烦--"实践是检验真理的唯一标准"嘛

百度知道推广实战技巧之如何做关键词排名

上一篇文章写了百度知道实战技巧及如何防止被删除,这是做百度知道很重要的方面.但是如果仅此而已,那么做百度知道的意义的不大了.我把做百度知道的营销推广定义为:第一,口碑宣传;第二,引导流量.也就是如果你做的这条百度知道没有浏览量,那么这条百度知道可以说毫无价值.到底怎么做好百度知道排名,甚至搜索长尾关键词能上百度首页呢?下面给大家介绍一些实战技巧: 1.关键词百度指数分析 当我们做SEO关键词分析时,必须用的工具就是百度指数了,大家都清楚,一个没有指数的关键词对我们的网站毫无价值.而做百度知道之前

网络故障排除实战技巧精华篇

我们曾经介绍过一篇关于如何选择网络故障排除方法的文章,介绍了三种网络故障排除方法.这里我们又重拾话题,通过具体实例助您排除网络故障. 开始以前,先来简要回顾一下介绍过的三种方法. > 从下至上的方法:从OSI模型底端开始,顺序向上. 从上至下的方法:从OSI模型顶端开始,顺序往下. 分而治之的方法:从OSI模型特定层开始,确定问题是在该层.还是上层或下层. 从理论上来理解这些方法是容易的,但是如何在实际应用中运用来解决实际问题呢?来看几个利用从下至上的以及分而治之方法的实例.(因为从上至下的方法

绘制草图梳理与表达想法:草图原型实战技巧

五年时间转瞬即逝,在自己小窝的最后一个周末;眼看着家当和心情都被打包的差不多了,整个人却终于感冒发烧腹泻垮了下来,这是闹哪样呢.所幸本周前面几天可以抽出些时间做掉这篇译文,今天发掉先.接下来的两个月,大概要集中业余零散精力放在一本iOS书的翻译上了;希望还能有些时间分给这边.杂七杂八就到这里,我们直接进入正文--草图原型实战技巧,没有务虚的大道理,每个内容要点都很实用.走着. 在如今的用户体验及产品圈子里,越来越多的人开始了解到草图及相关的原型工作对于整个设计流程的重要意义;不过在实际工作中,真

小型商城站内优化实战技巧

个人觉得不同类型的网站做站内优化都大同小异,掌握优化http://www.aliyun.com/zixun/aggregation/12862.html">基本原则,因地制宜的进行优化.本文惠成藤家具孤藤就来分享下最新接受的一个小型商城案例的站内优化步骤: 1.标题添加主关键词 网站修改标题添加优化关键词,有个规律是:修改标题头部比起尾部对网站优化影响更大,因此孤藤的一贯做法是,如果关键词难度一般,直接把关键词加到网站标题尾部.这样百度更新标题需要时间更小,而且网站被降权的几率更小. 而孤

WEB专用服务器的安全设置的实战技巧(1)

IIS的相关设置: 删除默认建立的站点的虚拟目录,停止默认web站点,删除对应的文件目录c:inetpub,配置所有站点的公共设置,设置好相关的连接数限制,带宽设置以及性能设置等其他设置.配置应用程序映射,删除所有不必要的应用程序扩展,只保留asp,php,cgi,pl,aspx应用程序扩展.对于php和cgi,推荐使用isapi方式解析,用exe解析对安全和性能有所影响.用户程序调试设置发送文本错误信息给户.对于数据库,尽量采用mdb后缀,不需要更改为asp,可在IIS中设置一个mdb的扩展映