四大 FCKeditor 实战应用技巧

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

　　1、适时打开编辑器

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

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

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

　　

<scrīpt type="text/javascrīpt"> PHPChina 开源社区门户udCX$cNW/y+U      <!-- PHPChina 开源社区门户a/h1E9@'x[4?9v.l      function showFCK(){ -^1_�Bt&X Z�f @0      var oFCKeditor = new FCKeditor( 'fbContent' ) ; PHPChina 开源社区门户"Gj2dh7T$@v       oFCKeditor.BasePath = '/FCKeditor/' ; PHPChina 开源社区门户/ R ]s'@(WS)p�~2W       oFCKeditor.ToolbarSet = 'Basic' ; Tr@oFKK0      oFCKeditor.Width = '100%' ; PHPChina 开源社区门户"/;Tz/'fL"O U*/       oFCKeditor.Height = '200' ; PHPChina 开源社区门户,OG(M6CJ%~.zI       oFCKeditor.ReplaceTextarea() ; "^9S4jkyw6@*]9Z0     } ,X ~y2xV#v$i a,d0     //--> DR!xk'ch q;q v_`0     </scrīpt> PHPChina 开源社区门户Tc:j4em4Z      <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属性进行设置。

　　ASP实现代码：

　　

<div id="fckToolBar"></div>  PHPChina 开源社区门户z"^-^KB/]c <%  PHPChina 开源社区门户t;a H$Lg[8f Dim oFCKeditor  i#l2tO$Q)q(t;b6wBb0Set oFCKeditor = New FCKeditor  2?5|H^ x6J5g,U0with oFCKeditor  PHPChina 开源社区门户rF0@"W.e .BasePath = fckPath  PHPChina 开源社区门户+h]#D"o?n'Yhw .Config("ToolbarLocation") = "Out:fckToolBar"  3k,uP'd ^OL0 Cc%Z�w(S)y0o8R1l0.ToolbarSet = "Basic"  X$Iw!NO/w0.Width = "100%"  5VH+u![;|xB8uF0.Height = "200"  PHPChina 开源社区门户 S"].FOul Kg*Z |-VM+w:v1e0.Value = ""  ,XGlq h^Wf0.Create "jcontent"  f:C(EgE!e0PHPChina 开源社区门户 TT#{-Cx1uC }I7t .Height = "150"  PHPChina 开源社区门户0F8S5J:/1Z,B(uq .Value = ""  PHPChina 开源社区门户�/*z E6Q%[4O4Q#n2DW4M .Create "jreach"  FQ+HpWK�_:q%Br0end with  $QeKm�b;n0r0%>

　　JAVAscrīpt实现代码：

　　

<div id="xToolbar"></div>  _+ZeY/0p0FCKeditor 1:  Gnw$Dl2J4c0<scrīpt type="text/javascrīpt">  PHPChina 开源社区门户d'X"e?:~/h <!--  6Z&q#b.X RO0// Automatically calculates the editor base path based on the _samples directory.  PHPChina 开源社区门户+U? ci_2]&~R{$U // This is usefull only for these samples. A real application should use something like this:  !S1Bhw v+{]y0// oFCKeditor.BasePath = '/fckeditor/' ; // '/fckeditor/' is the default value.  PHPChina 开源社区门户 R'BE5if:j1U C var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ;  (VP^�n1X6Q3hZ9p0 -y&HE3Nf�_%O0var oFCKeditor = new FCKeditor( 'FCKeditor_1' ) ;  Om6D z4SL0oFCKeditor.BasePath = sBasePath ;  PHPChina 开源社区门户RX a!H#p ~1R oFCKeditor.Height = 100 ;  8]ua3v�?_/X"Y0oFCKeditor.Config[ 'ToolbarLocation' ] = 'Out:parent(xToolbar)' ;  l// u;~[,/0oFCKeditor.Value = 'This is some <strong>sample text</strong>. You are using FCKeditor.' ;  8v6m{x%L H0oFCKeditor.Create() ;  6PAw.P$/w!?0//-->  O-`2O S'x|yA0</scrīpt>  PHPChina 开源社区门户 v EL$z+~ Y$Y <br />  r0@EUJVL0FCKeditor 2:  8f/D2}+zna k Kh0<scrīpt type="text/javascrīpt">  9h v#jr~5c0N0<!--  "j2ab?'J�PK.Q0oFCKeditor = new FCKeditor( 'FCKeditor_2' ) ;  %S0uVm&z? /"K0oFCKeditor.BasePath = sBasePath ;  zd%R ]d){@U$t0oFCKeditor.Height = 100 ;  -r(K {uU9L.x*v[#o/K0oFCKeditor.Config[ 'ToolbarLocation' ] = 'Out:parent(xToolbar)' ;  PHPChina 开源社区门户s Q$K4qj] oFCKeditor.Value = 'This is some <strong>sample text</strong>. You are using FCKeditor.' ;  2E:i:[p:~#{i l0oFCKeditor.Create() ;  X$_l]@7Di0//-->  v v*Q(e2uK/TD EG0</scrīpt>

　　此部分的详细DEMO请参照：
f Cy'x+FoEI3a.K0_samples/html/sample11.html
0E|,jP$la0_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版本：

<%  PHPChina 开源社区门户~ ^4zu,?'M o Dim oFCKeditor  PHPChina 开源社区门户F'~EQ c] Set oFCKeditor = New FCKeditor  (h5O-d M$Ey-b@0with oFCKeditor  PHPChina 开源社区门户+x5F_O]G!h .BasePath = fckPath  PHPChina 开源社区门户W HjW3K6J .Config("ToolbarLocation") = "Out:fckToolBar"  PHPChina 开源社区门户n7a@:S@&I if request.cookies(site_sn)("issuper")="yes" then  BY4{kR;KHa0.Config("LinkBrowser") = "true"  0lgr6Z(~e3On0.Config("ImageBrowser") = "true"  &d5[CyO"f ]0.Config("FlashBrowser") = "true"  PHPChina 开源社区门户{_B*],`.U2P_ .Config("LinkUpload") = "true"  PHPChina 开源社区门户l!wR ]"H7IN1OZ .Config("ImageUpload") = "true"  qD E7P6V-h0.Config("FlashUpload") = "true"  vb7A q�J0end if  4OpuVYp)Z0.ToolbarSet = "Basic"  PHPChina 开源社区门户$u'B9]9u#c JzZ .Width = "100%"  PHPChina 开源社区门户7K'q X5JxBw .Height = "200"  :|f8e,j�@+s7D4S0.Value = ""  PHPChina 开源社区门户8YNAMDT[ j .Create "jcontent"  Qh O(i0a{0%>

　　JAVAscrīpt版本：

　　

var oFCKeditor = new FCKeditor( 'fbContent' ) ; O T2TljpI#O0Y0      <%if power = powercode then%> NV;o {w-W0      oFCKeditor.Config['LinkBrowser'] = true ; x$XY(sK$|;I1_0      oFCKeditor.Config['ImageBrowser'] = true ; K d&q;|n&d%J/O H@0      oFCKeditor.Config['FlashBrowser'] = true ; PHPChina 开源社区门户-rST@ R/CJO       oFCKeditor.Config['LinkUpload'] = true ; tP5pLni l0      oFCKeditor.Config['ImageUpload'] = true ; PHPChina 开源社区门户DHf b|#XP9xE5[       oFCKeditor.Config['FlashUpload'] = true ; PHPChina 开源社区门户oW/oPWf       <%end if%> PHPChina 开源社区门户 d�c `P AN@j:G       oFCKeditor.ToolbarSet = 'Basic' ; wZ1Q^%x3x0      oFCKeditor.Width = '100%' ; PHPChina 开源社区门户2CQ/Ds:N3ULA'H}       oFCKeditor.Height = '200' ; PHPChina 开源社区门户UTr&M7{&gJ;B       oFCKeditor.Value = '' ; zP M v}2G0      oFCKeditor.Create() ;