FCKeditor2.6.3操作说明,基本设置,精简以及JS调用方法

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 创建DIVJustifyLeft 左对齐
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(不可以)
更多设置选项请参考>>

接下来是编辑器位置的设置，我的习惯是把editor放在根目录下，最开始所述的六个文件也放在根目录下（Tips:建议放在根目录下，并且建议使用时设置路径也采用绝对路径，如"/fckeditor/"，而我的习惯的设置是"/"），这样有利于fckeditor的更新升级，并且网站下所有文件夹都可以任意调用，不存在其它文件夹名变了而其它地方就无法使用编辑器的问题。
打开fckeditor.js文件，找到 this.BasePath = '/fckeditor/' ;改为 this.BasePath = '/' ;
编辑器域内默认的显示字体为12px，想要修改可以通过修改样式表来达到要求，打开editor/css/fck_editorarea.css，把第4行改为 font-size: 14px;即可。 14即为你想要的字体的大小

FCKEDITOR类参考:(fckeditor.js)
下面是用来在页面中建立编辑器的FCKEDITOR类的说明

构造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:编辑器的唯一名称(相当于ID)
WIDTH:宽度
HEIGHT:高度
toolbarSet:工具条集合的名称
value:编辑器初始化内容

属性:
instanceName:编辑器实例名
width:宽度,默认值为100%
height:高度,默认值是200
ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default
value:初始化编辑器的HTML代码,默认值为空
BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最好能用相对于站点根路径的表示方法,要以/结尾
CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true
DisplayErrors:是否显示提示错误,默为true;

集合:
Config[Key]=value;
这个集合用于更改配置中某一项的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";

方法:
Create()
建立并输出编辑器

RepaceTextArea(TextAreaName)
用编辑器来替换对应的文本框

自定义样式列表
FCKEDITOR的样式工具栏中提供了预定义的样式,样式是通过XML文件定义的,默认的XML样式文件存在于FCkEditor根文件夹下的FckStyls.xml文件中
这个XML文件的结构分析如下:
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>

每一个STYLE标记定义一种样式,NAME是显示在下拉列表中的样式名,ELEMENT属性指定此样式所适用的对象,因为FCKEDITOR中的样式是上下文敏感的,也就是说,选择不同的对象,仅会显示针对这类对象定义的样式

三.创建自己的在线编辑器(JS版)

第一步 我们需要做的就是在页面的HEAD段中放入SCRIPT标记以引入JAVASCRIPT整合模块.例如:
<script type="text/javascript" src="fckeditor.js"></script>,路径根据自己的目录进行相应修改即可.

第二步 现在,FCKEDITOR类已经可以使用了.有两个方法在页面中建立一个FCKEDITOR编辑器:
方法1:内联方式:在页面的FORM标记内需要插入编辑器的地方置入以下代码:
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'logbody' ) ;
oFCKeditor.BasePath = '/' ;
oFCKeditor.ToolbarSet = 'Basic' ;
oFCKeditor.Width = '100%' ;
oFCKeditor.Height = '400' ;
oFCKeditor.Value = '' ;
oFCKeditor.Create() ;
</script>
如:<label for="title">标题：</label>
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'title' ) ;
oFCKeditor.Create() ;
</script> 这样就创建了一个名为title的编辑框
如果要给它附值的话,就用:oFCKeditor.Value = '这里是内容' ;
在测试的时候,发现用上面这个方法会出现几个问题,就是当内容里有 ' " 回车时,就显示不了内容.所以推荐使用第二个方法
方法2:TEXTAREA标记替换法:在页面的ONLOAD事件中,添加以下代码以替换一个已经存在的TEXTAREA标记,这样就不会出现方法1的问题了.如:
<html>
<head>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>
这样,ID为MyTextarea的文本区域就会成为编辑框了.这个方法的文本区域的内容可以直接在文本区域内写.

四.一些常见问题及使用技巧

1、适时打开编辑器
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
很多时候，我们在打开页面的时候不需要直接打开编辑器，而在用到的时候才打开，这样一来有很好的用户体验，另一方面可以消除FCK在加载时对页面打开速度的影响，点击“Open Editor”按钮后才打开编辑器界面。
实现原理：
使用JAVASCRIPT版的FCK，在页面加载时（未打开FCK），创建一个隐藏的TextArea域，这个TextArea
的name和ID要和创建的FCK实例名称一致，然后点击”Open Editor”按钮时，通过调用一段函数，使用
FCK的ReplaceTextarea()方法来创建FCKeditor，代码如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript”>
<!–
function showFCK(){
var FCKeditor = 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属性进行设置。
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 FCKeditor = 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”>
<!–
FCKeditor = 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>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

参考资料:
http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide
http://blog.chinaunix.net/u2/69227/showart_697612.html
http://www.cnblogs.com/timy/archive/2008/08/21/1273497.html
http://blog.8s8s.net/read.php?315