FCKeditor实战技巧_CSS/HTML

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

function showFCK(){
var oFCKeditor = new FCKeditor( 'fbContent' ) ;
oFCKeditor.BasePath = '/FCKeditor/' ;
oFCKeditor.ToolbarSet = 'Basic' ;
oFCKeditor.Width = '100%' ;
oFCKeditor.Height = '200' ;
oFCKeditor.ReplaceTextarea() ;
}
//-->

textarea><BR><BR>2、使用FCKeditor 的 API</P> <P>FCKeditor编辑器，提供了非常丰富的API，用于给End User实现很多想要定制的功能，比如最基本的数据验证，如何在提交的时候用JS判断当前编辑器区域内是否有内容，FCK的API提供了GetLength()方法；</P> <P>再比如如何通过脚本向FCK里插入内容，使用InsertHTML()等；</P> <P>还有，在用户定制功能时，中间步骤可能要执行FCK的一些内嵌操作，那就用ExecuteCommand()方法。</P> <P>详细的API列表，请查看FCKeditor的Wiki。而常用的API，请查看FCK压缩包里的_samples/html/sample08.html。此处就不贴代码了。<BR></P> <P>3、外联编辑条（多个编辑域共用一个编辑条）</P> <P align=center>这个功能是2.3版本才开始提供的，以前版本的FCKeditor要在同一个页面里用多个编辑器的话，得一个个创建，现在有了这个外联功能，就不用那么麻烦了，只需要把工具条放在一个适当的位置，后面就可以无限制的创建编辑域了，如图<BR><IMG height=393 " src="https://www.gxlcms.com/Uploads//upload/2006103164225529.GIF" width=408></P> <P>要实现这种功能呢，需要先在页面中定义一个工具条的容器：，然后再根据这个容器的id属性进行设置。</P> <P>ASP实现代码：<BR> 代码如下:<BR> <BR><% <BR>Dim oFCKeditor <BR>Set oFCKeditor = New FCKeditor <BR>with oFCKeditor <BR>.BasePath = fckPath <BR>.Config("ToolbarLocation") = "Out:fckToolBar" <p>.ToolbarSet = "Basic" <BR>.Width = "100%" <BR>.Height = "200" <p>.Value = "" <BR>.Create "jcontent" <p>.Height = "150" <BR>.Value = "" <BR>.Create "jreach" <BR>end with <BR>%> <BR><BR>JAVASCRIPT实现代码：<BR> 代码如下:<BR> <BR>FCKeditor 1: <BR> <BR>// Automatically calculates the editor base path based on the _samples directory. <BR>// This is usefull only for these samples. A real application should use something like this: <BR>// oFCKeditor.BasePath = '/fckeditor/' ; // '/fckeditor/' is the default value. <BR>var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ; <p>var oFCKeditor = new FCKeditor( 'FCKeditor_1' ) ; <BR>oFCKeditor.BasePath = sBasePath ; <BR>oFCKeditor.Height = 100 ; <BR>oFCKeditor.Config[ 'ToolbarLocation' ] = 'Out:parent(xToolbar)' ; <BR>oFCKeditor.Value = 'This is some sample text. You are using FCKeditor.' ; <BR>oFCKeditor.Create() ; <BR>//--> <BR></ script> <BR><br /> <BR>FCKeditor 2: <BR> <BR>oFCKeditor = new FCKeditor( 'FCKeditor_2' ) ; <BR>oFCKeditor.BasePath = sBasePath ; <BR>oFCKeditor.Height = 100 ; <BR>oFCKeditor.Config[ 'ToolbarLocation' ] = 'Out:parent(xToolbar)' ; <BR>oFCKeditor.Value = 'This is some sample text. You are using FCKeditor.' ; <BR>oFCKeditor.Create() ; <BR>//--> <BR></ script><BR><BR>此部分的详细DEMO请参照_samples/html/sample11.html，_samples/html/sample11_frame.html</P> <P>4、文件管理功能、文件上传的权限问题</P> <P>一直以后FCKeditor的文件管理部分的安全是个值得注意，但很多人没注意到的地方，虽然FCKeditor在各个Release版本中一直存在的一个功能就是对上传文件类型进行过滤，但是她没考虑过另一个问题：到底允许谁能上传？到底谁能浏览服务器文件？</P> <P>之前刚开始用FCKeditor时，我就出现过这个问题，还好NetRube（FCKeditor中文化以及FCKeditor ASP版上传程序的作者）及时提醒了我，做法是去修改FCK上传程序，在里面进行权限判断，并且再在fckconfig.js里把相应的一些功能去掉。但随之FCK版本的不断升级，每升一次都要去改一次配置程序fckconfig.js，我发觉厌烦了，就没什么办法能更好的控制这种配置么？事实上，是有的。</P> <P>在fckconfig.js里面，有关于是否打开上传和浏览服务器的设置，在创建FCKeditor时，通过程序来判断是否创建有上传浏览功能的编辑器。首先，我先在fckconfig.js里面把所有的上传和浏览设置全设为false，接着我使用的代码如下：</P> <P>ASP版本：<BR> 代码如下:<BR><% <BR>Dim oFCKeditor <BR>Set oFCKeditor = New FCKeditor <BR>with oFCKeditor <BR>.BasePath = fckPath <BR>.Config("ToolbarLocation") = "Out:fckToolBar" <p>if request.cookies(site_sn)("issuper")="yes" then <BR>.Config("LinkBrowser") = "true" <BR>.Config("ImageBrowser") = "true" <BR>.Config("FlashBrowser") = "true" <BR>.Config("LinkUpload") = "true" <BR>.Config("ImageUpload") = "true" <BR>.Config("FlashUpload") = "true" <BR>end if <BR>.ToolbarSet = "Basic" <BR>.Width = "100%" <BR>.Height = "200" <p>.Value = "" <BR>.Create "jcontent" <BR>%> <BR><BR>JAVASCRIPT版本：<BR> 代码如下:<BR> var oFCKeditor = new FCKeditor( 'fbContent' ) ;<BR> <%if power = powercode then%><BR> oFCKeditor.Config['LinkBrowser'] = true ;<BR> oFCKeditor.Config['ImageBrowser'] = true ;<BR> oFCKeditor.Config['FlashBrowser'] = true ;<BR> oFCKeditor.Config['LinkUpload'] = true ;<BR> oFCKeditor.Config['ImageUpload'] = true ;<BR> oFCKeditor.Config['FlashUpload'] = true ;<BR> <%end if%><BR> oFCKeditor.ToolbarSet = 'Basic' ;<BR> oFCKeditor.Width = '100%' ;<BR> oFCKeditor.Height = '200' ;<BR> oFCKeditor.Value = '' ;<BR> oFCKeditor.Create() ;<BR><BR> </p><p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/dysph.js"></script></div> <div class="downbox clearfix"> <div class="ico"><img src="https://js.51dongshi.net/tpl/pc2/images/document.png" alt="文档"></div> <div class="txt"> <h4>FCKeditor实战技巧_CSS/HTML</h4> <div class="co">FCKeditor实战技巧_CSS/HTML:原文：http://3rgb.com，作者：柠檬园主转载请保留此信息 FCKeditor至今已经到了2.3.1版本了，对于国内的WEB开发者来说，也基本上都已经闻风知多少了，很多人将其融放到自己的项目中，更有很多大型的网站从中吃到了甜头。今天开始，我将一点点的介绍自己</div> <div class="tj"><b>推荐度：</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div> </div> <div class="btn"> <a href="javascript:;" class="html2word" data-model="article" data-id="adcgeh" title="文档下载"> <b>点击下载本文</b> <span>文档为doc格式</span> </a> </div> </div> <script>keji_detail_ga('article_content_bottom');</script> <div class="tvideo_tag"> 标签： <a href="/tlist-9297/">方法</a> <a href="/tlist-9472/">技巧</a> <a href="/tlist-246007/">html</a> </div> <div class="tvideo_box tvideo_box_tab"> <div class="hd"> <ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul> </div> <div class="bd"> <ul class="ult_jpic clearfix"> <script>get_hot_jiaodian_content('wz_hot_jiaodian',33,'hot',1);</script> </ul> </div> </div> </div> <!--中间文章 end--> <!--右侧专题 star--> <div class="ult_zt"> <script>keji_detail_ga('article_right_top');</script> <div class="ult_ztbox"> <h4>最新推荐</h4> <ul class="tvideo_r_a clearfix"> <script>get_detail_right('wz_right_new',33,'')</script> </ul> </div> <script>keji_detail_ga('article_right_middle');</script> <div class="ult_ztbox"> <h4>猜你喜欢</h4> <ul class="telist_rb clearfix"> <script>get_detail_right('wz_right_love',33,'')</script> </ul> </div> <script>keji_detail_ga('article_right_new_bottom');</script> <div class="ult_ztbox"> <h4>热门推荐</h4> <ul class="tvideo_r_b clearfix"> <script>get_detail_right('wz_right_hot',33,'')</script> </ul> </div> <script>keji_detail_ga('article_right_bottom');</script> </div> <!--右侧专题 end--> <div style="display:none"><a href="https://www.51dongshi.net/wzztf/ad/adcgeh/">专题</a> </div> </div> </div> <script src="https://js.51dongshi.net/plug/qrcode/qrcode.min.js"></script> <script src="https://js.51dongshi.net/js/share.js" charset="UTF-8"></script> <script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/waypoints.min.js"></script> <script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/icon_step.js"></script> <style> #qrcode{padding: 15px;background: #fff;} </style> <div id="qrcode" style="display: none"></div> <script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.net/eedfadcgeh.html");</script> <iframe src="https://hits.51dongshi.net/?biao=ho_article&id=928405" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe> <script src="https://js.51dongshi.net/js/shHighlighter.js"></script> <link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css"> <script id="fffz" data-domain="//www.51dongshi.net/index" src="https://js.51dongshi.net/js/fffz/fffz.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/pcwz/tj.js"></script> <div style="display:none"><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <!--foot star--> <div class="footer"> <div class="m_box"> <div class="footer_in"> <a href="#" target="_blank">产品服务</a> <a href="#" target="_blank">发展历程</a> <a href="#" target="_blank">企业资讯</a> <a href="#" target="_blank">企业文化</a> <a href="#" target="_blank">关于我们</a> <a href="#" target="_blank">加入我们</a> <a href="#" target="_blank">联系我们</a> <a href="#" target="_blank">网站导航</a> <a href="#" target="_blank">网站律师</a> </div> <ul class="ftrlist"> <li> <a rel="nofollow" href="https://www.itrust.org.cn" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a> </li> <li> <a rel="nofollow" href="https://www.12377.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a> </li> <li> <a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a> </li> <li> <a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/creditchina.gif" alt="信用中国"></a> </li> <li class="last"> <a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p> </a> </li> </ul> <div class="footer_co"> <a href="/" class="footlogo"><img src="https://js.51dongshi.net/tpl/pc2/images/logo.png" alt="动视"></a> <p>Copyright © 2019-2025 <a href="/" target="_blank">51dongshi.net</a> 版权所有</p> <p> <a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-34</a> </p> <p>违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p> </div> </div> </div> <!--foot end--> <a href="#0" class="cd-top">Top</a> <script type="text/javascript"> $(function(){ var _line=parseInt($(window).height()/3); $(window).scroll(function(){ if ($(window).scrollTop()>100) { $('.edu_top').css({'position':'fixed','top':'0','z-index':'99'}) }else{ $('.edu_top').css({'position':'relative','top':'0'}) } }) }) </script> <script type="text/javascript" src="https://jss.51dongshi.net/ga/all.js"></script> </body> </html>