当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > FCKeditor 实战技巧

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

No. « 113 114 115 116 »

技术文章搜索

关键字

CSS样式表 中的 FCKeditor 实战技巧

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 96 ::
收藏到网摘: n/a

原文：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() ;