首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

FCKEditor研究1

2012-10-19 
FCKEditor研究一初步了解了一下FCKEditor。  研究的内容包括如下几个方面:  一、FCKEditor的介绍  二、FCKEdi

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的使用上面其实已讲过。关于它的优化,就是删掉里面的一此无关的文件,这个网上都有讲到。点此处进入。这个蛮简单。

热点排行