FCKEditor研究一

初步了解了一下FCKEditor。

　　研究的内容包括如下几个方面：

　　一、FCKEditor的介绍

　　二、FCKEditor的下载

　　三、FCKEditor的工作原理

　　四、FCKEditor配置方法

　　五、FCKEditor的使用方法

　　六、FCKEditor的优化

　　第一部分：FCKEditor介绍

　　FCKEditor是一款开源的在线HTML编辑器。使用它，我们可以为网页提供类似于word一样的富文本编辑功能。它能用于多种服务器端语言，如：asp.net、asp、php、jsp。

　　第二部分：FCKEditor的下载在上面已提到。

　　第三部分：FCKEditor的工作原理

　　简单点就是在放编辑器的地方插入一个iframe。然后把这个iframe的src连接到：/FCKeditor/editor/fckeditor.html?InstanceName=ctl00_masterContent_fckContents&Toolbar=Basic。真正的编辑器这fckeditor.html这个页面中。真实情况就是这样了。那以fckeditor这个页是怎样实现编辑功能，编辑结果怎样返回？这个原理还是不明白。

　　怎样在html页面中创建编辑器呢？有两种办法：一种就是用FCKEditor for .net的控件，这是一个专用dotnet的服务器控件。我们可以在页面上直接放上它，然后，这个服务器控件会负责编辑器的呈现，细节都不用我们去关心了。另一种办法是通过在客户端用javascript来动态创建。怎么创建呢？FCKEditor有一个类叫：FCKEditor，可以在要插入编辑器的地方var editor=new FCKEditor("EditorContents");editor.Create();就好了。如果要对编辑器的默认配置进行调整，可以，在调用Create方法之前editor.xxxx=yyyyy修改就是了。事实上，这把FCKEditor的使用方法都讲了。

　　第四部分：FCKEditor的配置

　　这个是重点了，网上有很详细的资料，我这儿只提一下关键的地方，可以在哪些地方配置FCKEditor？

　　一、FCKEditor\fckconfig.js，在这儿，配置内容都在FCKConfig中，它是一个javascript类。以前都没有想到，嘿，还有用js文件做配置文件的。不过，客户端，用js作配置文件的确是很方便。最关键的就是读取起来很方便。

　　二、FCKEditor\FCKeditor.js中。编辑器的创建就是通过它的实现的。在它的里面有这么几行代码：

     this.InstanceName = instanceName ;      this.Width   = width   || '100%' ;      this.Height   = height  || '200' ;      this.ToolbarSet  = toolbarSet || 'Default' ;      this.Value   = value   || '' ;      this.BasePath  = '/fckeditor/' ;      this.CheckBrowser = true ;      this.DisplayErrors = true ;      this.EnableSafari = false ;  // This is a temporary property, while Safari support is under development.      this.EnableOpera = false ;  // This is a temporary property, while Opera support is under development.

     this.Config   = new Object() ;

     // Events      this.OnError  = null ;

　　在这儿，可以进行轻量的配置，如ToolbarSet、BasePath。这儿要注意的是，这些东西优先于FCKConfig中的配置。

　　三、是在使用服务器控件的时候，设置FCKEditor控件的属性，也可以达到配置的目的。它优先于在FCKEditor类中的配置。

　　四、关于样式的配置什么的，当然是要在FCKeditor\FCKStyle.xml中编辑了。

　　五、在Web.config中配置：

    <add key="FCKeditor:BasePath" value="~/FCKeditor/"/>     <add key="FCKeditor:UserFilesPath" value="~/Files/"/>

　　可配置的地方基本上就是这些了，初次使用它，可能不知所措，但是只要明白，FCKEditor之所以能发生作用是调用了其内部的某些文件，如果明白了FCKeditor中的各个文件、文件夹的作用，那么，可配置的地方就多了。

　　至于具体怎么配置，网上的资料多着呐。资料一。

　　有一个配置上的问题网上的大侠都没有引起注意，也没有多说，就是编辑器的工具栏的问题，怎样自定义工具栏呢？

　　见Default工具栏的定义：

        FCKConfig.ToolbarSets["Default"] = [          ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],          ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],          ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],          ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],          '/',          ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],          ['OrderedList','UnorderedList','-','Outdent','Indent'],          ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],          ['Link','Unlink','Anchor'],          ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'],          '/',          ['Style','FontFormat','FontName','FontSize'],          ['TextColor','BGColor'],          ['FitWindow','-','About']         ] ;

　　这说明一个工具栏就是一个交叉数组，这个数组的结构如下：

　　FCKConfig.ToolbarSets["toolBarName"] = [['xxxx','yyyy',……],[……],……,'/',[……]……]

　　最外面一个[]是表示数组的初始化，里面每一个[]表示一个分组。每一个'/'表示工具栏换行。上面的Default工具栏有三行，定义里面'Source'之类的表示一个工具栏图标。至于每个字符串对应的功能，点此处参见。晓得了这个规律，我们就可以自定义工具栏了。

　　关于FCKEditor的使用上面其实已讲过。关于它的优化，就是删掉里面的一此无关的文件，这个网上都有讲到。点此处进入。这个蛮简单。