Web编程前端之2：选择html在线编辑器

用什么样的Web编辑器，eWebEditor，kindeditor还是FCKEditor?

 

我接触的第一个Web编辑器是eWebEditor。它是国产的，在IE7及以下的版本中效果是非常不错的，不兼容IE8及火狐，而且使用不当就会留下上传漏洞的隐患。这样的编辑器，还是不要用了（很想支持国产，但是...）

放弃eWebEditor后，我选择了kindeditor。它是老外开发的，能兼容目前所有版本的浏览器，纯静态（文件上传需要自
己实现，小问题）。但是它不支持Word表格的复制（就是不能直接从Word上复制表格到编辑器中），而且会经常出现图文丢失的现象，郁闷，我还是不用了（老外的东西也不一定好，...）

前段时间接触了FCKEditor，发现这个编辑器相当不错，查了一下，网上大家对它的评价超高（貌似淘宝也是用的这个编
辑器）。它也是老外开发的，能兼容目前所有版本的浏览器，对Word的支持非常好，复制表格没有一点变形。到目前为
止，我已经在两个项目中使用了这个编辑器，一个是基于PHP的订餐系统，另外一个是基于ASP的公司网站，FCKEditor对PHP，ASP以及ASP.NET的支持都很好，使用起来非常方便。


编辑器的安全问题一直是一个令很多人头痛的问题，这主要在于文件上传上。各种编辑器默认情况下都没有对文件上传
进行身份认证（它也不可能实现一个通用的身份认证），开发者必须根据自己系统的情况加入适当的身份认证代码。另外
编辑器允许的文件上传类型也需要进行严格的限制，例如eWebEditor允许在后台修改上传文件类型，这样一旦歹徒获取后
台密码，即可轻易上传任意格式的文件。低版本的FCKEditor（好像是2.1以下的版本）默认情况下允许上传任意格式的文件。


总结一下FCKEditor的使用（以2.6.5版为例）：


（1）精简，"言多必失"，文件多了也是一种隐患。FCKEditor支持多种服务器脚本语言，实际使用的时候我们根本用不了那么多文件，我们要根据自己的需要对其进行精简。
对于ASP系统来说：

FCKEditor根目录，仅保留"fckeditor.asp，fckconfig.js，fckeditor.js，fckpackager.xml，fckstyles.xml，
fcktemplates.xml"这些文件以及editor目录。删除示例目录"_samples"。
"fckeditor\editor\filemanager\connectors"目录下面仅保留"asp"目录，删除其它目录和文件。

对于PHP系统来说：

FCKEditor根目录，仅保留"fckeditor.php，fckeditor_php4.php，fckeditor_php5.php，fckconfig.js，fckeditor.js，
fckpackager.xml，fckstyles.xml，fcktemplates.xml"这些文件以及editor目录。删除示例目录"_samples"。"fckeditor\editor\filemanager\connectors"目录下面仅保留"php"目录，删除其它目录和文件。

（2）修改文件上传采用的脚本程序（语言）。

默认的FCKEditor文件上传程序为asp，如果是用在asp系统中，那就不用再修改了。

如果是用在PHP系统中的话，需要做如下修改，打开fckconfig.js
找到:
var _FileBrowserLang ge = asp
var _QuickUploadLang ge = asp
改成:
var _FileBrowserLang ge = php
var _QuickUploadLang ge = php

（3）开启文件上传，修改文件上传目录。

对于ASP系统来说：
打开fckeditor\editor\filemanager\connectors\asp\config.asp
启用文件上传:

找到:
ConfigIsEnabled = false

改成:
ConfigIsEnabled = tr

设置上传存放目录:

找到:
ConfigUserFilesPath = "/admin/uppic/"
改成:
ConfigUserFilesPath = "自定义的路径"

对于PHP系统来说：
打开fckeditor/editor/filemanager/browser/default/connectors/php/config.php
启用文件上传:

找到:
$Config[Enabled] = false

改成:
$Config[Enabled] = tr

设置上传存放目录:

找到:
$Config[UserFilesPath] = /userfiles/
改成:
$Config[UserFilesPath] = 自定义的路径

（4）修改上传文件命名方式。

FCKEditor上传文件，文件名采用原文件名，如果想采用自定义的文件命名方式（比如，随即名称），可以修改如下地
方：

对于ASP系统来说：
打开fckeditor\sample\edit\editor\filemanager\connectors\asp\commands.asp

找到：
sFileName = SanitizeFileName( sFileName )

将该句改为自定义的文件命名格式，例如：

dim RndStr
Randomize
RndStr = Cstr(Fix(9000*rnd()+1000)) 产生一个随机数
sFileName =year(date)&month(Date)&day(Date)&hour(time)&minute(time)&second(time)&RndStr &"." &
**tension

对于PHP系统来说：
打开fckeditor\editor\editor\filemanager\connectors\php\commands.php

找到：
$sOriginalFileName = $sFileName ;

在该句前面加入：

// 初始化种子
$sstr =split(" ",microtime(),5);
$seed =$sstr[0]*10000;
// 使用种子初始化随机数发生器
srand($seed);
// 生成指定范围内的随机数
$random =rand(1000,10000);
// 合成随即的文件名
$sFileName = date("YmdHis", time()).$random.".".$**tension;


（5）FCKEditor在程序中引用方式。

对于ASP系统来说：
需要包含下面的头文件
<!--#incl? file="fckeditor/fckeditor.asp"-->
在编辑器所在的位置添加如下代码：
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/fckeditor/" 这个路径必须是相对于站点根目录的路径，设置错误编辑器
将无法显示

oFCKeditor.ToolbarSet="Default"
oFCKeditor.Width = "98%"
oFCKeditor.Height= "500px"

oFCKeditor.Val = "" 设置默认值
oFCKeditor.Create "shangpin_description" 编辑器的id，相当于input标签的name属性值，这里是
shangpin_description
%>

对于PHP来说：
在编辑器所在的位置添加如下代码：
<?php
incl?("fckeditor/fckeditor.php"); // 头文件
$oFCKeditor = new FCKeditor("shangpin_description") ; // 编辑器的id，相当于input标签的
name属性值，这里是shangpin_description
$oFCKeditor->BasePath="/fckeditor/ " ; //设置FCKeditor路径

$oFCKeditor->ToolbarSet ="Default";
$oFCKeditor->Width="98%";
$oFCKeditor->Height="500px";

$oFCKeditor->Val=""; // 设置默认值
$oFCKeditor->Create();
?>

（6）获取FCKEditor中的数据。

对于服务器端脚本程序来说，将"编辑器的id"当做input标签的name属性值来获取即可，例如：

在ASP中reqst("shangpin_description")，在PHP中$_REQST["shangpin_description"]

JS中用FCKeditorAPI.GetInstance(shangpin_description).GetXHTML(tr)得到shangpin_description对应的值