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对应的值
FCKEditor 是一款开源的非常优秀的WEB在线编辑器,它的JS类库几乎匹敌于当前流行的JQuery,目前最新版本为2.65 .本文基于.Net的应用针对FCKEditor的源代码进行分析,同时改造了部分过于复杂的功能,将其简单化。供大家学习讨论之用 一、对"插入/编辑超链接"功能进行了彻底简化,不可否认源代码中考虑了超链接的几乎所有应用情景,非常之完善和全面,甚至提供了服务器目录的浏览和文件上传功能, 但这也恰恰暴露了更多的安全隐患,参考了各大网站的应用,简化为仅一个显示文本和一个链接地址 这部分功能的源代码主要分布在两个文件中: UI部分 /editor/dialog/fck_link.html 功能函数 /editor/dialog/fck_link/fck_link.js 因为原始版本包含了过于复杂的功能,所以在分析和修改js代码时也费了不少功夫,删除了多余的功能函数,支持了文本的显示,缩减大约90%的代码。具体细节可查看DEMO. 二、对"插入/编辑FLASH"去除了服务器浏览和文件上传功能;去除了“高级”里的多余选项,将功能整合在一个标签下。 这部分功能源代码分布在三个文件中: UI界面 /editor/dialog/fck_flash.html 功能函数 /editor/dialog/fck_flash/fck_flash.js Flash预览 /editor/dialog/fck_flash/fck_flash_preview.html 三、对"插入/编辑表格"功能,去除了"标题"、"摘要"、"标题单元格"三项,通过生成的HTML代码可以发现,FCKEditor是一款非常严谨的软件, 它严格遵循了W3C。但大部开发人员都不熟悉的HTML标签对于用户来说使用就更较少了,固去除了这三项 四、对"插入/编辑图片"进行了很大的改动,弥补了很多不足,看源码理解吧
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值