一、简介
2005年11月30日推出了FCKeditor 2.3版，据其官方网站称：这是FCKeditor 2.0版的稳定版本。大家现在可以考虑正式使用它了。目前支持的后台语言有ASP、JAVA、Perl、ASP.Net、PHP和ColdFusion。
笔者在经过简单的试用发现，2.x版确实比1.6版有了许多的改进。首先是FCKeditor的文件结构更加清晰，可以更方便地将其部署在自己的系统中。另外2.0版终于支持了Firefox 1.0浏览器，这将为FCKeditor赢得更多的使用者。废话不多说，让我们赶快来学习如何安装、配置FCKeditor 2.3吧。
二、安装与范例
首先到http://sourceforge.net/projects/fckeditor/ 下载FCKeditor 2.3，并将其解压缩到你的网站目录里面，并将文件夹名改为FCKeditor。举例来说，如果你的网站放在shaof这个目录下面，则在这个目录中建立3个子目录：
n FCKeditor：存放从网站上下载的FCKeditor
n upimages：用于存放上传的图片
n admin：里面存放测试页面
网站的结构如下：
/FCKeditor //FCKeditor目录
/UserFiles //上传文件目录
/admin
test.php //提交数据页面
testsubmit.php //显示数据页面
进入到FCKeditor目录下，打开_samples目录，里面含有各种编程语言调用FCKeditor的范例程序页面，其中php目录中包含着一些使用PHP来调用FCKeditor的范例，大家可以看一下，了解FCKeditord的调用方法，下面是我简写了一个test.php程序，放在网站根目录下的admin目录中：
<?php
<?php
if($_POST["ADD"]){
$Content=$_POST[\'EditorDefault\'];
echo $Content;
//变量$Content就是我们在FCKeditord里面编辑的内容，这里可以将其保存到数据库，代码省略。
}
?>
<html>
<head>
</head>
<body>
<form action="<?php echo $_SERVER[\'PHP_SELF\']; ?>" method="post" language="javascript">
<?php
//引入在线编辑器
include("../FCKeditor/fckeditor.php") ;
这里我们先看一下调用FCKeditor的函数，2.0版的调用方式与1.6版变化不大，如果你以前安装过FCKeditor 1.6，那么只需要修改很少的代码升级到2.0。
FCKeditor( instanceName[, width, height, toolbarSet, value] )
|
引用值
|
含义
|
|
InstanceName
|
实例化编辑器所需的唯一名称
|
|
Width
|
编辑器的宽度，单位为象素或者百分比（可选择的，默认为：100%）
|
|
Height
|
编辑器的高度，单位为象素或者百分比（可选择的，默认为：200）
|
|
ToolbarSet
|
工具栏的名称（可选择的，默认为：Default）
|
|
Value
|
编辑器的内容（HTML）初始值（可选择的）
|
好啦，下面就让我们利用这个函数来定制FCKeditor吧。
$oFCKeditor = new FCKeditor(\'FCKeditor1\') ;
$oFCKeditor->BasePath = \'../FCKeditor/\' ;
$oFCKeditor->ToolbarSet = \'Default\' ;
$oFCKeditor->InstanceName = \'EditorDefault\' ;
$oFCKeditor->Width = \'100%\' ;
$oFCKeditor->Height = \'400\' ;
$oFCKeditor->Create() ;
?>
<INPUT type="submit" name="ADD" value="提交">
</form>
</body>
</html>
三、配置
FCKeditor 2.0的配置文件为FCKeditor\fckconfig.js，其中几个重要的配置项目如下：
1、工具栏的设置
默认情况下，FCKeditor会调用如下的工具栏按钮，大家可以根据自己的需要进行增减。需要注意的是，2.0版与1.6版的按钮并不完全相同，有些按钮以及删除或者改名了。
//##
//## Toolbar Buttons Sets
//##
FCKConfig.ToolbarSets["Default"] = [
[\'Source\',\'-\',\'Save\',\'NewPage\',\'Preview\'],
[\'Cut\',\'Copy\',\'Paste\',\'PasteText\',\'PasteWord\',\'-\',\'Print\'],
[\'Undo\',\'Redo\',\'-\',\'Find\',\'Replace\',\'-\',\'SelectAll\',\'RemoveFormat\'],
[\'Bold\',\'Italic\',\'Underline\',\'StrikeThrough\',\'-\',\'Subscript\',\'Superscript\'],
[\'OrderedList\',\'UnorderedList\',\'-\',\'Outdent\',\'Indent\'],
[\'JustifyLeft\',\'JustifyCenter\',\'JustifyRight\',\'JustifyFull\'],
[\'Link\',\'Unlink\'],
[\'Image\',\'Table\',\'Rule\',\'SpecialChar\',\'Smiley\'],
[\'Style\',\'FontFormat\',\'FontName\',\'FontSize\'],
[\'TextColor\',\'BGColor\'],
[\'About\']
] ;
2、简体中文设置
编辑edit/lang/fcklanguagemanager.js
将下面语句
FCKLanguageManager.AvailableLanguages =
{
\'ar\' : \'Arabic\',
\'bs\' : \'Bosnian\',
\'ca\' : \'Catalan\',
\'en\' : \'English\',
\'es\' : \'Spanish\',
\'et\' : \'Estonian\',
\'fi\' : \'Finnish\',
\'fr\' : \'French\',
\'gr\' : \'Greek\',
\'he\' : \'Hebrew\',
\'hr\' : \'Croatian\',
\'it\' : \'Italian\',
\'ko\' : \'Korean\',
\'lt\' : \'Lithuanian\',
\'no\' : \'Norwegian\',
\'pl\' : \'Polish\',
\'sr\' : \'Serbian (Cyrillic)\',
\'sr-latn\' : \'Serbian (Latin)\',
\'sv\' : \'Swedish\'
}
添加一行 \'zh-cn\' : \'Chinese\' 从而变成
FCKLanguageManager.AvailableLanguages =
{
\'ar\' : \'Arabic\',
\'bs\' : \'Bosnian\',
\'ca\' : \'Catalan\',
\'en\' : \'English\',
\'es\' : \'Spanish\',
\'et\' : \'Estonian\',
\'fi\' : \'Finnish\',
\'fr\' : \'French\',
\'gr\' : \'Greek\',
\'he\' : \'Hebrew\',
\'hr\' : \'Croatian\',
\'it\' : \'Italian\',
\'ko\' : \'Korean\',
\'lt\' : \'Lithuanian\',
\'no\' : \'Norwegian\',
\'pl\' : \'Polish\',
\'sr\' : \'Serbian (Cyrillic)\',
\'sr-latn\' : \'Serbian (Latin)\',
\'sv\' : \'Swedish\',
\'zh-cn\' : \'Chinese\'
}
然后到这里http://www.shaof.com/download/zh-cn.js下载汉化好的zh-cn.js保存到editor/lang目录下即可。
2、简体中文设置
编辑edit/lang/fcklanguagemanager.js
将下面语句
FCKLanguageManager.AvailableLanguages =
{
\'ar\' : \'Arabic\',
\'bs\' : \'Bosnian\',
\'ca\' : \'Catalan\',
\'en\' : \'English\',
\'es\' : \'Spanish\',
\'et\' : \'Estonian\',
\'fi\' : \'Finnish\',
\'fr\' : \'French\',
\'gr\' : \'Greek\',
\'he\' : \'Hebrew\',
\'hr\' : \'Croatian\',
\'it\' : \'Italian\',
\'ko\' : \'Korean\',
\'lt\' : \'Lithuanian\',
\'no\' : \'Norwegian\',
\'pl\' : \'Polish\',
\'sr\' : \'Serbian (Cyrillic)\',
\'sr-latn\' : \'Serbian (Latin)\',
\'sv\' : \'Swedish\'
}
添加一行 \'zh-cn\' : \'Chinese\' 从而变成
FCKLanguageManager.AvailableLanguages =
{
\'ar\' : \'Arabic\',
\'bs\' : \'Bosnian\',
\'ca\' : \'Catalan\',
\'en\' : \'English\',
\'es\' : \'Spanish\',
\'et\' : \'Estonian\',
\'fi\' : \'Finnish\',
\'fr\' : \'French\',
\'gr\' : \'Greek\',
\'he\' : \'Hebrew\',
\'hr\' : \'Croatian\',
\'it\' : \'Italian\',
\'ko\' : \'Korean\',
\'lt\' : \'Lithuanian\',
\'no\' : \'Norwegian\',
\'pl\' : \'Polish\',
\'sr\' : \'Serbian (Cyrillic)\',
\'sr-latn\' : \'Serbian (Latin)\',
\'sv\' : \'Swedish\',
\'zh-cn\' : \'Chinese\'
}
然后到这里http://www.shaof.com/download/zh-cn.js下载汉化好的zh-cn.js保存到editor/lang目录下即可。
四、设置文件上传
FCKeditor 2.0采用了一种名为“Connector”（连接器）的技术来实现对文件的浏览以及上传。下图显示了文件浏览的工作流程图。
图1：Connector的工作流程图
从图中可以看出，当客户端向服务器发出一个文件操作请求后，Connector就会对此请求进行响应，在服务器的文件系统中进行执行操作，如：文件和文件夹的浏览以及创建操作。最后将结果以XML的格式回应给客户端。具体的技术细节大家可以阅读FCKeditor自带的说明指南。
落实到应用，首先我们要选择一个后台语言用来实现这个功能，这里我们以PHP为例进行说明。
1、 修改配置文件FCKeditor\fckconfig.js中的两段内容
//Link Browsing
FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/php/connector.php" ;
FCKConfig.LinkBrowserWindowWidth = screen.width * 0.7 ; // 70%
FCKConfig.LinkBrowserWindowHeight = screen.height * 0.7 ; // 70%
//Image Browsing
FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php" ;
FCKConfig.ImageBrowserWindowWidth = screen.width * 0.7 ; // 70% ;
FCKConfig.ImageBrowserWindowHeight = screen.height * 0.7 ; // 70% ;
2、 修改配置文件FCKeditor\editor\filemanager\browser\default\connectors\php\connector.php
// Get the "UserFiles" path.
$GLOBALS["UserFilesPath"] = \'/UserFiles/\' ;
UserFiles为文件上传的路径，与本文开头所给的例子相对应，大家可以自行修改。
好啦，只需要两步就完成了文件上传的配置工作，真是简单呀。以后我们通过FCKeditor上传的文件都会保存在网站的UserFiles目录下。
图2：FCKeditor2.0的文件管理截图
五、结束
最后大家可以把FCKeditor目录下的_docs和_samples两个目录删除以节省空间。本文是笔者以前写过的一篇名为《在线编辑器FCKeditor在PHP中的使用方法》（1.6版）文章的升级版本，文章如有不妥之处，还请大家指正。
另，遇到的问题
另，遇到的问题
1、图片文件上传路径问题