AppleStar

  • Increase font size
  • Default font size
  • Decrease font size
首页 Developer Other FCKeditor 实战技巧

FCKeditor 实战技巧

E-mail 打印 PDF

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

要实现这种功能呢,需要先在页面中定义一个工具条的容器:<divid="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版本:

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() ;

解释fck样式的工作原理

fck的样式设置涉及到了两个文件,一个是你定义好的样式表文件.css,另一个是告诉fck样式表如何使用的xml文件,两个文件确一不可。
      css文件的位置是不做要求的,但是需要你在应用的编辑器的页面上插入样式表文件的链接。这样才能显示出来样式。
      fckstyles.xml 在与editor目录同级的目录下。该文件定义了那些样式可以使用在那些标签里面。
这就是fck自带的样式xml定义

<?xml version="1.0" encoding="utf-8" ?>

<Styles>
    <Style name="Image on Left" element="img">
        <Attribute name="style" value="padding: 5px; margin-right: 5px" />
        <Attribute name="border" value="2" />
        <Attribute name="align" value="left" />
    </Style>
    <Style name="Image on Right" element="img">
        <Attribute name="style" value="padding: 5px; margin-left: 5px" />
        <Attribute name="border" value="2" />
        <Attribute name="align" value="right" />
    </Style>
    <Style name="Custom Bold" element="span">
        <Attribute name="style" value="font-weight: bold;" />
    </Style>
    <Style name="Custom Italic" element="em" />
    <Style name="Title" element="span">
        <Attribute name="class" value="Title" />
    </Style>
    <Style name="Code" element="span">
        <Attribute name="class" value="Code" />
    </Style>
    <Style name="Title H3" element="h3" />
    <Style name="Custom Ruler" element="hr">
        <Attribute name="size" value="1" />
        <Attribute name="color" value="#ff0000" />
    </Style>
</Styles>

每一个<style>将来会生成一个样式的菜单项。name名称就是显示在菜单里的文字 ;element定义了该样式可以应用在那种html标签上,<Attribute>的 name 指定了将会修改标签的哪个属性来应用样式 ,value则是修改成的值
看这个

    <Style name="Title" element="span">
        <Attribute name="class" value="Title" />
    </Style>

如果你在fck选定了文字 “经典论坛 ? 前台制作与脚本专栏 ? FCKeditor 实战技巧 - 1 ? 编辑帖子” 应用该样式 则原来文字
就会变成<span class="Title">经典论坛 ? 前台制作与脚本专栏 ? FCKeditor 实战技巧 - 1 ? 编辑帖子</span>

注意:如果编辑器呈整页编辑状态,那么整页里面也需要插入样式表链接才能显示出来样式。

 

使用FCKeditor添加文章时,在文章最后多了逗号。

【答】此情况发生在asp环境中。在asp里对于 提交的表单信息中如果有相同name属性的键值对  做‘逗号连接处理’
你们一定是使用了这样的js方法建立了编辑器
var oFCKeditor = new FCKeditor( 'editor' ) ;
oFCoFCKeditor.Create() ;
然后 又在同一个表单里面 添加了 一个id="editor" 或者 name ="editor"的 文本域
造成的!这样的话载入以后,实际上存在了两个 名称为editor表单控件了 所以在提交更新的时候,浏览器会出现逗号。

解决的方法是:第一种:不要在表单里面 添加 多余的 名为 editor 的文本域了
第二种:使用 fckeditor 的ReplaceTextarea()方法 :

window.onload = function()
{
       // 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( 'FCKeditor1' ) ;
       oFCKeditor.BasePath       = sBasePath ;
       oFCKeditor.ReplaceTextarea() ;
}
具体的可以看 fckeditor的实例中的html实例第二个

经典论坛讨论
http://bbs.blueidea.com/viewthread.php?tid=2678394

最后更新于: 2006-11-17 10:50  

添加评论


验证码
刷新

用户登录

ADS