13.2.1FCKeditor使用前的准备工作

13.2 FCKeditor在线编辑器

FCKeditor是目前最优秀的所见即所得的在线编辑器，FCKeditor具有功能强大、配置容易、跨浏览器、支持多种编程语言、开源等优点。这里以FCKeditor_2.6.6版本为例，结合新闻发布系统讲解FCKeditor的使用方法。

13.2.1 FCKeditor使用前的准备工作

FCKeditor_2.6.6 的下载地址为 http://ckeditor.com/download ，下载此版本的 zip 压缩文件FCKeditor_2.6.6.zip（对于 Linux 或 UNIX 系统，需选择下载对应的 tar.gz 压缩文件）。成功下载FCKeditor_2.6.6.zip后，安装FCKeditor的方法较为简单，只需将FCKeditor_2.6.6.zip压缩文件解压到新闻发布系统的根目录下即可，如图13-2所示。

“fckeditor”目录下存在如图13-3所示的子目录及文件，其中“_samples”目录提供了FCKeditor的示例程序，“editor”目录定义了FCKeditor在线编辑器的CSS样式表、皮肤文件、图片以及文件管理程序等文件。fckeditor_php5.php 文件是 PHP 程序员实例化 FCKeditor 的类文件， fckconfig.js是FCKeditor工具栏集合的配置文件，这两个文件对于PHP程序员而言至关重要。

13.2.2 FCKeditor类的成员变量和成员方法

fckeditor_php5.php程序中定义了一个FCKeditor类，该类主要为PHP程序员提供了7个成员变量和3个成员方法。

1．FCKeditor类中的成员变量及功能

public $InstanceName：定义了在线编辑器的名称（例如content），该成员变量需要和FCKeditor类的构造方法一起使用才有意义。例如代码“$oFCKeditor = new FCKeditor('content')”构造了一个名称为content的在线编辑器，该在线编辑器的实例名为$oFCKeditor。在线编辑器的名称（content）类似于多行文本框表单控件textarea的名称；通过实例名（$oFCKeditor）可以访问FCKeditor实例中的其他成员变量，并可以调用FCKeditor类中的成员方法。

public $BasePath：定义了FCKeditor 的根目录，FCKeditor 的根目录实际上是fckeditor_php5.php文件和fckconfig.js文件所在的目录。例如$oFCKeditor->BasePath = 'fckeditor/'。

public $Width：定义了在线编辑器实例的宽度（单位像素），例如$oFCKeditor->Width = 550。

public $Height：定义了在线编辑器实例的高度（单位像素），例如$oFCKeditor->Height = 350。

public $Value：定义了在线编辑器的内容，一般对应于多行文本框表单控件textarea的值。例如代码$oFCKeditor->Value = "请在此输入新闻的内容！"。

public $ToolbarSet：定义了在线编辑器实例的工具栏集合。默认情况下 FCKeditor 提供了Default和Basic工具栏集合，工具栏集合类似于Word窗口中的格式工具栏与常用工具栏。例如$oFCKeditor->ToolbarSet = "Default"或$oFCKeditor->ToolbarSet = "Basic"。

public $Config定义了在线编辑器的额外配置，$Config是一个数组，数组中的“键”来自于fckconfig.js文件中的“属性名”。例如$oFCKeditor->Config['EnterMode'] = 'br'。

2．FCKeditor类中的成员方法

public function _ _construct( $instanceName )：FCKeditor类的构造方法。需要和FCKeditor类的成员变量$InstanceName一起使用才有意义。

public function CreateHtml()：返回某个在线编辑器实例的 HTML 代码。例如$fckeditor = $oFCKeditor->CreateHtml() ;。

public function Create()：在网页上显示某个在线编辑器实例的 HTML 代码，例如$oFCKeditor->Create() ;。

13.2.3 FCKeditor的高级配置

fckconfig.js为程序员提供了配置FCKeditor高级功能的简单接口。使用记事本打开fckconfig.js文件后，通过修改该Javascript文件的配置选项，程序员可以轻松构造一个充满个性的在线编辑器，下面列出了一些常用的配置选项。

1．修改语言配置

FCKConfig.AutoDetectLanguage = true ;　　//浏览器自动检测语言

FCKConfig.DefaultLanguage = 'en' ;　　//默认语言为英文

可以修改为：

FCKConfig.AutoDetectLanguage = false ;　//关闭浏览器自动检测语言

FCKConfig.DefaultLanguage = 'zh-cn' ;　　//默认语言为简体中文

说明：“fckeditor/editor/lang/”目录下有对应的语言脚本文件。

2．修改皮肤配置

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/defult/' ; //默认皮肤

可以修改为：

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ; //Office 2003样式的皮肤

说明如下。

（1）在fckconfig.js文件中FCKConfig.BasePath的默认值为“fckeditor/editor/”目录。

（2）“editor/skins”目录中定义了在线编辑器的皮肤文件，包括default（默认的灰色面板的编辑器）、Office2003（模仿Office 2003工具栏的编辑器）和silver（银色面板的编辑器）。

3．添加中文字体

FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

可以修改为：

FCKConfig.FontNames = 'Arial;Times New Roman;Verdana;宋体;黑体;隶书;楷体_GB2312;' ;

说明：新添加的字体应该存在于浏览器主机所在的操作系统中（“C:\WINDOWS\Fonts”目录下定义了该操作系统支持的字体）。

4．设置回车键模式

FCKConfig.EnterMode = 'p';　　　　　//在线编辑器中的回车对应p标签（即开始新的段落）

FCKConfig.ShiftEnterMode = 'br';　　　//Shift+回车键对应br标签

可以修改为：

FCKConfig.EnterMode = 'br';　　　　//回车键对应br标签（即换行操作）

FCKConfig.ShiftEnterMode = 'p';　　　//Shift+回车键对应p标签

5．设置工具栏展开

FCKConfig.ToolbarStartExpanded= true ;　//载入编辑器的时候展开工具按钮

FCKConfig.ToolbarStartExpanded= false ;　//载入编辑器的时候收缩工具按钮

6．设置在线编辑器的文字颜色列表

FCKConfig.FontColors = '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,808080,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33 CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99 CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF' ;

7．设置在线编辑器的文字字号列表

FCKConfig.FontSizes =

'smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;

可以修改为：

FCKConfig.FontSizes = '9;10.5;12;14;16;18;20;22;24' ;

8．设置工具栏集合ToolbarSet

默认情况下， FCKeditor 提供了 Default 和 Basic 两个工具栏集合，分别定义在数组FCKConfig.ToolbarSets["Default"]和FCKConfig.ToolbarSets["Basic"]中。可以从Default工具栏中删除部分工具栏按钮或者向Basic工具栏中增加工具栏按钮实现工具栏的定制。然后在PHP程序中，使用代码“$oFCKeditor->ToolbarSet = "Basic";”可以轻松地将FCKeditor在线编辑器的工具栏设置为Basic工具栏集合。

除此以外，还可以构造自定义的工具栏集合，例如，下面的代码定义了名字为My的工具栏集合。

FCKConfig.ToolbarSets["My"] = [

['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','Image' ,'Flash','Table','Rule','Smiley']

] ;

使用代码“$oFCKeditor->ToolbarSet = "My";”可以轻松地将FCKeditor在线编辑器的工具栏设置为“My”工具栏集合。

9．设置在线编辑器表情文件所在目录

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ; //设置表情文件所在目录为：fckeditor\editor\images\smiley\msn\

读者可以将自己收集的表情图片放在该目录下，以便在FCKeditor在线编辑器中显示。

10．设置在线编辑器表情文件列表

在线编辑器表情文件列表定义在数组FCKConfig.SmileyImages中，读者可以将自己收集的表情图片名称放在表情文件列表中，以便在FCKeditor在线编辑器中显示。

11．在线编辑器中表情按钮的其他设置

FCKConfig.SmileyColumns：设置表情图片分成几列显示。

FCKConfig.SmileyWindowWidth：用于设置表情窗口的宽度（单位像素）。

FCKConfig.SmileyWindowHeight：用于设置表情窗口的高度（单位像素）。

13.2.4 FCKeditor在新闻发布系统中的应用

在PHP页面中创建一个FCKeditor在线编辑器的步骤是：首先载入FCKeditor类文件，然后创建一个FCKeditor实例，接着设置FCKeditor实例的根目录以及FCKeditor实例其他成员变量的值，最后显示在线编辑器的 HTML 代码。以新闻添加页面 news_add.php 代码为例，将news_add.php程序中的代码片段：

<textarea cols="60" rows="16" name="content"></textarea>

修改为如下代码。

<?php

include("fckeditor/fckeditor.php"); //载入FCKeditor类文件

$oFCKeditor = new FCKeditor('content'); // 创建名称为content在线编辑器，实例名为$oFCKeditor

$oFCKeditor->BasePath = 'fckeditor/'; // 设置FCKeditor实例的根目录

$oFCKeditor->Width = 550;　　　　　// 设置FCKeditor实例的宽度

$oFCKeditor->Height = 350;　　　　　// 设置FCKeditor实例的高度

$oFCKeditor->Value = "请在此输入新闻的内容！"; // 设置FCKeditor实例的内容

$oFCKeditor->ToolbarSet = "Default";　　// 设置FCKeditor实例的工具栏集合

$oFCKeditor->Config['EnterMode'] = 'br';　// 设置FCKeditor实例的额外配置

$oFCKeditor->Create() ;　　　　　// 显示在线编辑器的HTML代码

?>

管理员用户成功登录新闻发布系统后， news_add.php页面的运行结果如图13-4所示。

使用同样的方法将新闻编辑页面程序news_edit.php中的代码片段：

<textarea cols="60" rows="16" name="content"><?php echo $news['content']?></textarea>

修改为如下代码。

<?php

include("fckeditor/fckeditor.php");　　//载入FCKeditor类文件

$oFCKeditor = new FCKeditor('content');　// 创建content在线编辑器，实例名为$oFCKeditor

$oFCKeditor->BasePath = 'fckeditor/';　　// 设置FCKeditor实例的根目录

$oFCKeditor->Width = 550;　　　　　// 设置FCKeditor实例的宽度

$oFCKeditor->Height = 350;　　　　　// 设置FCKeditor实例的高度

$oFCKeditor->Value = $news['content'];　// 设置FCKeditor实例的内容

$oFCKeditor->ToolbarSet = "Default";　　//设置FCKeditor实例的工具栏集合

$oFCKeditor->Config['EnterMode'] = 'br';　//设置FCKeditor实例的额外配置

$oFCKeditor->Create() ;　　　　　//显示在线编辑器的HTML代码

?>

至此新闻发布系统中有关新闻管理功能的在线编辑已经全部实现。

13.2.5 FCKeditor的文件管理

FCKeditor在线编辑器内置了有关文件管理功能的程序，这些程序存放在“editor/filemanager/”目录下，FCKeditor提供了文件浏览和快速文件上传两种文件管理功能。“文件浏览”为浏览器用户提供了3种功能：浏览服务器已存在的多媒体文件、在编辑器中浏览多媒体文件以及上传本地多媒体文件至服务器。“快速文件上传”为浏览器用户提供了快速上传本地文件至服务器的功能，是“文件浏览”功能的子集。

1．“文件浏览”功能的设置

在fckconfig.js 找到下面3条语句。

FCKConfig.LinkBrowser = true ;

FCKConfig.ImageBrowser = true ;

FCKConfig.FlashBrowser = true ;

将LinkBrowser、ImageBrowser和FlashBrowser设置为true，意味着开启了FCKeditor的“文件浏览”功能，浏览器用户可以通过 FCKeditor 浏览服务器端的多媒体文件。开启“文件浏览功能”体现在如图13-5所示的“浏览服务器”按钮可以显示出来。

要想实现“文件浏览”功能，还需对fckconfig.js文件进行如下配置（配置“文件浏览”功能使用的动态语言种类）。

var _FileBrowserLanguage = 'php' ;

考虑到新闻发布系统的安全性，建议关闭“文件浏览功能”，将LinkBrowser、ImageBrowser和FlashBrowser一律设置为false，FCKeditor的“浏览服务器”按钮被隐藏，如图13-6所示。

2．“快速文件上传”功能的设置

在fckconfig.js 找到下面3条语句。

FCKConfig.LinkUpload = true ;

FCKConfig.ImageUpload = true ;

FCKConfig.FlashUpload = true ;

将LinkUpload、ImageUpload和FlashUpload设置为true，意味着开启了FCKeditor的“快速文件上传”功能，浏览器用户可以通过FCKeditor快速上传本地文件到服务器（如图13-7所示）。若将其一律设置为false时，关闭了FCKeditor“快速文件上传”功能，此时FCKeditor在线编辑器的“上传”选项卡被隐藏，如图13-8所示。

要想实现“快速文件上传”功能，还需对fckconfig.js文件进行如下配置（配置“快速文件上传”功能使用的动态语言种类）。

var _QuickUploadLanguage = 'php' ;

除此以外，还需打开“editor\filemanager\connectors\php”目录中的 config.php 文件，找到如下两行PHP代码。

$Config['Enabled'] = false ; //将false改为true，即允许上传

$Config['UserFilesPath'] = '/userfiles/' ; //定义上传目录，对于新闻发布系统可将其改为/news/userfiles/目录

经过上面几个步骤的配置，可以轻松实现使用FCKeditor快速上传多媒体文件的功能。

3．中文乱码问题的解决

上传多媒体文件时，如果文件名中包含了中文字符将出现乱码问题，无法在 FCKeditor 正常预览。解决这个问题的办法为将所有上传文件的文件名重命名，方法如下。

打开“editor\filemanager\connectors\php”目录中的io.php文件，将函数名为SanitizeFileName的函数代码修改为如下代码。

function SanitizeFileName( $sNewFileName ){

$arr = explode('.', $sNewFileName);

$ext = array_pop($arr);

$filename = date('Ymd_His_') . rand(1000, 9999) .'.' . $ext;

return $filename;

}

SanitizeFileName()函数实现的功能是将多媒体的文件名$sNewFileName 重命名，新的文件名按照“日期_时间_随机数”的格式命名，既可防止修改后的文件名重名，又可防止新的文件名中出现中文字符。

4．文件管理的高级配置

FCKeditor 还提供了文件管理的高级设置，其中包括设置允许上传文件的后缀名以及禁止上传文件的后缀名。读者可以在fckconfig.js文件和config.php文件中搜索“AllowedExtensions”和“DeniedExtensions”关键字进行文件管理的高级配置，这里不再赘述。

13.2.6 FCKeditor瘦身

所有的配置完成后，为了提高用户体验，有必要删除一些“多余”的FCKeditor文件或目录，为FCKeditor瘦身，步骤如下。

（1）删除根目录下所有以“_”开头的临时文件及目录（例如“_samples”目录以及“editor”目录下的“_source”目录）；删除根目录下的其他文件，只保留 fckconfig.js、fckeditor.js、fckeditor.php、fckeditor_php4.php、fckeditor_php5.php（php5的调用文件）、fckstyles.xml（样式）、fcktemplates.xml（模板文件）、fckpackager.xml和“editor”目录。

（2）“editor\lang”目录存放的是多语言配置文件，若只使用en和zh-cn（简体中文），可以删除其他的语言配置文件。

（3）“editor\skins”目录存放了皮肤文件，FCKeditor提供了3种皮肤：default、office2003和silver，用户可以自行决定是否删除某种皮肤文件。注意，删除皮肤文件将影响到fckconfig.js配置文件中的FCKConfig.SkinPath选项。

（4）“editor\filemanager\connectors”目录存放了 FCKeditor所支持的 Web 动态语言，可以只保留“php”目录。