FckEditor详细配置

FCKeditor算是现在用得比较多的编辑器之一了,现在最新版本为2.6.3,官方网站:http://www.FCKeditor.net

现在比较流行的编辑器主要有:ewebeditor,tiny mce,FCKeditor

记得有人曾说过这样一段话:

初学者喜欢:ewebeditor 官方网站:http://www.ewebeditor.net/

美化者喜欢:tiny mce 官方网站:http://tinymce.moxiecode.com/

而专业人士则更中意:FCKeditor

的确,ewebeditor比较容易上手,是国人开发的,中文说明文档比较丰富；tiny mce美化方面做得比较好,看起来比较漂亮,而FCKeditor相对来说修改设置方面有些麻烦. 不过这三个编辑器功能都比较全,用哪个主要还是看个人爱好.

这里讨论的是用调用JS的方式调用这个编辑器,所以不存在服务器端语言,当然也就没有上传文件方面的设置.现在比较多的人在用FCKeditor时,都会把上传这块去掉,然后自己单独加个上传的,或许是出于安全方面考虑的吧.上传的设置方式网上比较多这方面的文章.

开始设置FCKeditor,先下载相应的版本.这里以2.6.3版为例

一.减肥

官方提供的是全部功能及适应全部语言的,所以针对自己的须要进行相应的减肥.

先从根目录开始减.如图:

这个是全部文件,把里面灰色的文件全部删除,即只留下六个文件(夹):

fckconfig.js fckeditor.js fckpackager.xml fckstyles.xml fcktemplates.xml editor(文件夹)

然后是editor文件夹,把 _source 文件夹删除.

接下来是editor/filemanager/connectors,因为这里没用到服务端操作,所以把里面的文件(夹)全部删除

然后editor/lang,选择自己须要的语言包,把其它不须要的全部删除即可.一般只保留 en.js zh.js zh-cn.js; zh-cn.js是简体中文语言包,en.js是英文，zh.js是繁体中文

editor/skins 这个是皮肤文件夹,一般有三个皮肤,选择自己喜欢的皮肤,如保留default,其它两个文件夹删除,或是喜欢office2003,把其它两个删除,然后把office2003改名成default就行了.也可以不在这里改文件夹名,而留在设置文件中把default改成office2003,不过推荐改文件夹名,来得快点.

说明:fckeditor默认的这种奶黄色,如果不想用默认的，那就选那个silver，因为银色也就是灰色和任何颜色配起来都不会难看，而那个office2003的皮肤，反正我是非常不喜欢的，并且图片相对也比较大，增加了下载时间

二.FCKeditor常用设置

FCKeditor已经安装成功了，也可以使用了。但是我们可以通过一些简单的设置使FCKeditor更加符合您的项目需求。

设置工具栏很简单，只需打开fckeditor目录下面的fckconfig.js文件，按CTRL+F搜索FCKConfig.ToolbarSets["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','Blockquote','CreateDiv'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

'/',

['Style','FontFormat','FontName','FontSize'],

['TextColor','BGColor'],

['FitWindow','ShowBlocks','-','About']

]

在默认情况下，FCKeditor会调用上面定义的所有工具栏按钮。可以根据自己的需求进行设置。对上面的配置选项功能说明进行汇总。

代码名称 功能 代码名称 功能

Source 源代码 DocProps 页面属性

- ｜分隔符 Save 保存

NewPage 新建 Preview 预览

Templates 模板 Cut 剪切

Copy 复制 Paste 粘贴

PasteText 粘贴为无格式文本 PasteWord 从MS Word粘贴

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 增加缩进 Blockquote 块引用

CreateDiv 创建DIV JustifyLeft 左对齐

JustifyCenter 居中对齐 JustifyRight 右对齐

JustifyFull 两端对齐 Link 插入／编辑链接

Unlink 取消链接 Anchor 插入／编辑锚点链接

Image 插入编辑图像 Flash 插入／编辑Flash

Table 插入／编辑表格 Rule 插入水平线

Smiley 插入表情 SpecialChar 插入特殊符号

PageBreak 插入分页 Style 样式

FontFormat 格式 FontName 字体

FontSize 大小 TextColor 文本颜色

BGColor 背景颜色 FitWindow 全屏编辑

ShowBlocks 显示区域 About 关于Fuckeditor

工具栏配置选项功能进行汇总

你也可以创建一个非默认的工具栏按钮设置，您可以从FCKConfig.ToolbarSets["Default"]当中的代码重新复制一份，然后将Default改成您想要的名字。

注意：fckconfig.js配置选项采用JavaScript语法，如果您不懂JavaScript的话，请在配置之前进行备份。

如果你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全了，在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，也就是基本的toolbar,这里配置了一个适合于大部份网站使用的工栏目按钮

FCKConfig.ToolbarSets["MyDesign"] = [

['Source','DocProps','-','NewPage','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

['Link','Unlink','Anchor'],

['Style','FontFormat','FontName','FontSize'],

['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

['TextColor','BGColor'],

['FitWindow','ShowBlocks']] ;

要想使用自定义的工具栏按钮，必须在创建FCKeditor实例后设置使用的工具栏选项。

oFCKeditor.ToolbarSet = "MyDesign"; //JavaScript

接下来，我们对常用的一些设置选项功能进行总结，可参考fckeditor目录下fckconfig.js文件进行阅读

FCKConfig.AutoDetectLanguage 自动语言检查

FCKConfig.DefaultLanguage 默认语言设计，建议改成zh-cn

FCKConfig.ContextMenu 右键菜单内容

FCKConfig.ToolbarStartExpanded 当页面载入的时候，工具栏默认情况下是否展开

FCKConfig.FontColors 文字颜色列表

FCKConfig.FontNames 字体列表，可加入国内常用的字体，如宋体、揩体、黑体等

FCKConfig.FontSizes 字号列表

FCKConfig.FontFormats 文字格式列表

FCKConfig.StylesXmlPath 指定风格XML文件路径

FCKConfig.TemplatesXmlPath 指定模板XML文件路径

FCKConfig.BodyId 设置编辑器的id

FCKConfig.BodyClass 设置编辑器的class

FCKConfig.DefaultLinkTarget 设置链接默认情况下的target属性

FCKConfig.BaseHref 相对链接的基地址

FCKConfig.SkinPath 设置默认皮肤路径

FCKConfig.SmileyPath 表情文件路径，您可以设置此项更改表情

FCKConfig.SmileyImage 表情文件

FCKConfig.SmileyColumns 将表情分成几列显示

FCKConfig.SmileyWindowWidth 显示表情窗口的宽度，单位像素

FCKConfig.SmileyWindowHeight 显示表情窗口的高度，单位像素

FCKConfig.TabSpaces 编辑器域内是否可以使用Tab键,1为可以,默认为0(不可以)

更多设置选项请参考>>