PHP环境下配置在线编辑器FCKeditor

　　在线编辑器FCKeditor 2.0PHP环境下试用小记

　　一、简介

　　2004年11月30日推出了FCKeditor 2.0 RC1版，据其官方网站称：这是FCKeditor 2.0版的第一个稳定版本。大家现在可以考虑正式使用它了。目前支持的后台语言有ASP、ASP.Net、PHP和ColdFusion。

　　笔者在经过简单的试用发现，在线编辑器2.0版确实比1.6版有了许多的改进。首先是FCKeditor的文件结构更加清晰，可以更方便地将其部署在自己的系统中。另外2.0版终于支持了Firefox 1.0浏览器，这将为FCKeditor赢得更多的使用者。废话不多说，让我们赶快来学习如何安装、配置FCKeditor 2.0吧。

　　二、安装与范例

　　首先到http://sourceforge.net/projects/fckeditor/ 下载FCKeditor 2.0 RC1（554K），并将其解压缩到你的网站目录里面，并将文件夹名改为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目录中：
if($_POST["ADD"]){　　
　　　$Content=$_POST['EditorDefault'];
echo$Content;
//变量$Content就是我们在FCKeditord里面编辑的内容，这里可以将其保存到数据库，代码省略。
}

　　//引入在线编辑器

　　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=newFCKeditor('FCKeditor1')　;
$oFCKeditor->BasePath='../FCKeditor/';　　
$oFCKeditor->ToolbarSet='Default';
$oFCKeditor->InstanceName='EditorDefault';
$oFCKeditor->Width='100%';
$oFCKeditor->Height='400';
$oFCKeditor->Create();

　　三、配置在线编辑器

　　FCKeditor 2.0的配置文件为FCKeditorfckconfig.js，其中几个重要的配置项目如下：

　　1、工具栏的设置

　　默认情况下，FCKeditor会调用如下的工具栏按钮，大家可以根据自己的需要进行增减。需要注意的是，2.0版与1.6版的按钮并不完全相同，有些按钮以及删除或者改名了。

//##
//##ToolbarButtonsSets
//##
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目录下即可。

　　四、设置文件上传

　　FCKeditor 2.0在线编辑器采用了一种名为“Connector”（连接器）的技术来实现对文件的浏览以及上传。下图显示了文件浏览的工作流程图。

　　从图中可以看出，当客户端向服务器发出一个文件操作请求后，Connector就会对此请求进行响应，在服务器的文件系统中进行执行操作，如：文件和文件夹的浏览以及创建操作。最后将结果以XML的格式回应给客户端。具体的技术细节大家可以阅读FCKeditor自带的说明指南。

　　落实到应用，首先我们要选择一个后台语言用来实现这个功能，这里我们以PHP为例进行说明。

　　1、　修改配置文件FCKeditorfckconfig.js中的两段内容

//LinkBrowsing
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%
//ImageBrowsing
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、　修改配置文件

FCKeditoreditorfilemanagerrowserdefaultconnectorsphpconnector.php
//Getthe"UserFiles"path.
$GLOBALS["UserFilesPath"]='/UserFiles/';　　UserFiles为文件上传的路径，与本文开头所给的例子相对应，大家可以自行修改。

　　好啦，只需要两步就完成了文件上传的配置工作，真是简单呀。以后我们通过FCKeditor上传的文件都会保存在网站的UserFiles目录下。

　　五、结束

　　最后大家可以把FCKeditor目录下的_docs和_samples两个目录删除以节省空间。本文是笔者以前写过的一篇名为《在线编辑器FCKeditor在PHP中的使用方法》（1.6版）文章的升级版本，文章如有不妥之处，还请大家指正。

　　另，遇到的问题

　　1、图片文件上传路径问题

　　安装我文章里面的设置，上传路径设置为UserFiles/，但是上传图片文件时，FCKeditor都自动把文件上传到UserFiles/image目录下面，自做主张的建立了一个image目录，很是不爽。原因不明。