FCKeditor介绍

最新推荐文章于 2021-07-03 11:36:57 发布

dfuy63575

最新推荐文章于 2021-07-03 11:36:57 发布

阅读量169

点赞数

文章标签： php java javascript ViewUI

原文链接：http://www.cnblogs.com/toyman_1298/archive/2011/01/06/1927022.html

版权

FCKeditor介绍
FCKeditor是一个功能强大支持所见即所得功能的文本编辑器，可以为用户提供微软office软件一样的在线文档编辑服务。它不需要安装任何形式的客户端，兼容绝大多数主流浏览器，支持ASP.Net、ASP、ColdFusion 、PHP、Java、Active-FoxPro、Lasso、Perl、ython 等编程环境。

官方网站http://www.fckeditor.net/

官方文档http://wiki.fckeditor.net/

下载地址http://www.fckeditor.net/download/default.html

其实不同版本的FCKeditor配置过程基本类似，这里拿最新的2.63作为实例进行介绍。

FCKeditor安装和配置
到http://www.fckeditor.net，下载FCKeditor2.63.zip和FCKeditor.NET2.63版的2个zip包

(a) FCKeditor_2.6.3是其最新的Javascript文件和图片等；

(b) FCKeditor.Net_2.6.3.zip是一个ASP.NET控件DLL文件。

将a解压缩，得到FCKeditor的核心文件，将其拷贝到web项目的根目录下（建议，当然你可以任意放）。然后解压b,得到.NET支持的源码，进入，bin下的Release中存在FCKeditor的DLL（这里也有debug文件夹，建议使用release），我们需要在项目中添加对其引用即可。

1.工程浏览器上右键，选择添加引用（Add Reference…），找到浏览(Browse)标签，然后定位到你解压好的FredCK.FCKeditorV2.dll，确认就可以了。这时，FCKPro工程目录下就多了一个bin文件夹，里面包含FredCK.FCKeditorV2.dll文件。

2.为了方便RAD开发，我们把FCKeditor控件也添加到VS的工具箱（Toolbox）上来，展开工具箱的常用标签组（General），右键选择组件（Choose Items…），在对话框上直接找到浏览按钮，定位FredCK.FCKeditorV2.dll，然后确认就可以了。

3. 配置WebConfig，在<appSettings>节点添加，如下所示：

    <appSettings>
        <add key="FCKeditor:BasePath" value="/Web/fckeditor/"/>
        <add key="FCKeditor:UserFilesPath" value="/Web/Upload/" />
    </appSettings>
说明："/Web/"是项目名称。

BasePath：fckeditor是FCKeditor整个文件夹所在的目录。

UserFilesPath：上传文件、图片等存储的路径。

完成之后，再完成了下面的详细配置中的第一条，我们就可以使用FCKeditor控件了。为了更好的调试这个工具，使得其满足我们的实际需要，必须对其属性的设置进行修改。

FCKeditor详细的设置
进入FCKeditor文件夹，编辑 fckconfig 文件。其实里面罗列的都比较清楚，编写比较规范，还有一些注释，但是只要略懂英文的就能够看得懂，操作起来也非常的方便。下面就简单介绍几种常用的设置作为一个小例子。

1、此步骤是必须的，也是最重要的一步，必不可少的。

原来:

var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py

var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php

改为:

var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py

var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php

2、配置语言包。有英文、繁体中文等，这里我们使用简体中文。

原来：

FCKConfig.DefaultLanguage = 'en' ;

改为：

FCKConfig.DefaultLanguage = 'zh-cn' ;

3、配置皮肤。有default、office2003、silver风格等，这里我们可以使用默认。

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;

4、在编辑器域内可以使用Tab键。（1为是，0为否）

FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;

5、加上几种我们常用的字体的方法，例如：

修改

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

改为：

FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'

6、编辑器域内默认的显示字体为12px，想要修改可以通过修改样式表来达到要求，打开/editor/css/fck_editorarea.css，修改font-size属性即可。如font-size: 14px;

7、关于安全性。

如果你的编辑器用在网站前台的话，那就不得不考虑安全了，在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，也就是基本的toolbar，

FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','Image','-','About']
] ;

其实这些，你都可以按自己的需求进行设置，功能的足够强大为了提供了更多的选择，肯定能够满足你的需求。

当然也可以配置一下WebConfig,也能让它确保安全，接下来我们将讲到。

FCKEditor 2.6的问题：
1.FCKeditor出现"this connector is disabled Please check the"editor/filemanager/connectors/aspx/config.aspx"错误的解决办法

打开editor/filemanager/connectors/aspx/config.ascx修改CheckAuthentication()方法，返回true

private bool CheckAuthentication()
{
return true;
}

2.在上传文件窗口点击浏览服务器，会出现the server didn't send back a proper xml.....错误提示，因为后期版本的FCKEditor要求不同类型的文件分别传到不同的目录，包括file,image,falsh,media等目录，一定要先建立起来。

FCKeditor精简
进入FCKeditor文件夹，把所有“_”开头的文件和文件夹删掉，这些都是一些范例，只保留editor文件夹、fckconfig、fckeditor、fckstyles.xml、fcktemplates.xml就可以了；

进入editor文件夹，删掉“_source”文件夹，里面放的同样是源文件；

退回上一级目录进入filemanager文件夹，有browser和upload两个文件夹。进入browser"default"connectors，只保留aspx文件夹，其余的删掉；mcpuk目录亦可删除；upload也一样，只保留aspx文件夹；

退到editor再进入images文件夹，smiley里面放的是表情图标，有msn和fun两个系列，如果你想用自己的表情图标，可以把它们都删除；如果你想用这里的表情图标那就不要删了；

lang里面放的是语言包，如果只是用简体中文，那么只保留fcklanguagemanager、zh-cn两个文件就行了，建议也保留en（英文）、zh（繁体中文）两个文件，fcklanguagemanager是语言配置文件，有了它才能和fckconfig里的设置成对，对应上相应的语言文件，一定要保留！

再退出lang文件夹，进入skins文件夹，如果你想使用FCKeditor默认的奶黄色，那就把除了default文件夹外的另两个文件夹直接删除，如果想用别的，那就看你自己的喜好了。

FCKeditor是使用非常广泛的HTML编辑器，本文从 ASP.NET 的使用场景对 FCKeditor 与 FCKeditor.NET 的配置、功能扩展（如自定义文件上传子目录、自定义文件名、上传图片的后期处理等）、以及安全性进行初步的阐述。

希望能帮助有同样需求的同仁节省一点时间；也希望各位能指正其中的不足。谢谢。

一、自定义 FCKeditor 的 BasePath
BasePath 即FCKeditor在网站中的相对路径，默认值是 /fckeditor/，最好在Web.config appSettings中对其进行配置：

<add key="FCKeditor:BasePath" value="/FCKeditor_2.6.3/"/>
这样做有诸多优点：

开发环境与生产环境不同，开发环境一般是http://localhost/xxx.com/这种情况下FCKeditor就得放在一个虚拟目录http://localhost/fckeditor/中，若涉及多个网站的开发，而各网站的FCKeditor有差别时，这样显然不是最优；
而且因为物理目录结构与逻辑目录结构不同，也会有发生错误的隐患；
而如果采用Web.config的配置，就可以在开发环境采用不同的配置，FCKeditor的物理路径与生产环境保持一致；
当升级FCKeditor时，只需要将新版本的FCKeditor放在相应版本号的目录里，修改一下配置即可。这样可以解决因为静态资源的客户端缓存问题，不同用户出现不同的错误的问题；
可以直观地看到自己的FCKeditor的版本号。

二、配置文件上传的目录
FCKeditor的文件上传（如图片上传）目录可以通过Web.config appSettings进行配置，如：

<add key="FCKeditor:UserFilesPath" value="/UploadFile/FCKeditor/"/>
也可以在 /FCKeditorBasePath/editor/filemanager/connectors/aspx/config.ascx 中进行配置，但我建议 FCKeditor 目录中的内容能不改就不改（fckconfig.js除外），这样日后升级可以放心地替换即可。

三、自定义文件上传的子目录的格式
我们知道，一个文件夹下面不能存放过多的文件（据称Windows下面的目录下2000为阈值），否则对该目录的访问会严重影响I/O性能。而FCKeditor的文件存储是在单一的一个目录进行的。我对FCKeditor进行了扩展，可以在Web.config appSettings对存储目录的格式自定义，如：

<add key="FCKeditor:FolderPattern" value="%y/%m-%d/"/>
以今天的日期为例：这样产生的文件上传子目录格式为：2008/10-21/。
年月日格式的目录可以随意组合，如：

<add key="FCKeditor:FolderPattern" value="%y/%m/%d/"/>
这样产生的文件上传子目录变成了2008/10/21/

参考：

%y 代表当前时间的年份
%m 代表当前时间的月份
%d 代表当前时间的日

四、自定义文件上传的文件名格式
FCKeditor对文件名的处理规则是：如果当前目录下没有重名文件，则上传后的文件名与用户PC上的文件名一致；若存在n个重名文件，则加入用户PC上的文件名是Example.xxx，上传后的文件名变为：Example(n).xxx

我的项目里要求对用户上传的文件名变成Guid的格式，所以我对FCKeditor也做了扩展，在Web.config appSettings可以对上传后文件的格式自定义，如：

<add key="FCKeditor:FilenamePattern" value="%guid.%extl"/>
这样的文件名如：a299e63a-7d2d-493d-bbb9-99162ef5b6b8.gif

参考：

%guid 代表一个新的guid字符串
%fnl 代表源文件名的小写
%fnu 代表源文件名的大写
%extl 代表源文件扩展名的小写
%extu 代表源文件扩展名的大写

五、对上传图片进行缩放处理
用到FCKeditor图片上传功能的场景中，很多是内容的发表。内容中往往不需要几千像素大小的图片，比如我的项目中，文章区域最宽也就560像素，所以我做了一个扩展，在Web.config appSettings中可以对图片的最大宽度进行自定义：

<add key="FCKeditor:MaxWidthOfUploadedImg" value="560"/>
有了这段配置，上传后的图片的宽度都控制在了560像素及以内

六、自定义上传后图片URL中的域名
为了加快页面的渲染，我们可以把图片等静态资源放在一个独立的域名当中。但FCKeditor默认的图片上传后URL是相对路径，如图：

我增加了这个扩展，在Web.config appSettings可以配置上传后图片URL的域名，如：

如图：

七、解决上传文件名含有中文的文件时提示 "invalid file type" 的问题
这个问题只需要在Web.config中增加一段配置即可解决：

注意：

responseEncoding是网站的默认编码
FCKeditor_2.6.3是FCKeditor的BasePath

八、FCKeditor的安全性
在FCKeditor的2.3.2版本里，曾有一个漏洞，可以通过 /editor/filemanager/browser/default/connectors/aspx/connector.aspx 往服务器上传任意文件，我的网站就曾经中招。

2.6.3虽然暂未发现类似的问题，但一般情况下用不到的文件最好还是删除比较好：

FCKeditor BasePath 根目录中除了保留：
/editor
/fckconfig.js
/fckpackager.xml
/fckstyles.xml
/fcktemplates.xml
/license.txt
外，全部删除
/editor/filemanager/中除了保留：
/connectors/aspx/config.ascx
/connectors/aspx/upload.aspx
外，全部删除
删除 /editor/_source/
/editor/filemanager/connectors/aspx/config.ascx 的 CheckAuthentication() 方法中，增加验证用户是否登录的逻辑
注意：以上措施仅适用于ASP.NET的网站，其他语言版本的网站未考虑。

附：基于FCKeditor.Net_2.6.3修改后的源码
SOURCE: http://files.cnblogs.com/zhubo/FCKeditor.Net_2.6.3.rar
BIN(.NET 2.0): http://files.cnblogs.com/zhubo/FredCK.FCKeditorV2.rar

对以下文件的指定行进行了修改，
/FileBrowser/Config.cs line 45, 109, 161
/FileBrowser/FileWorkerBase.cs line 68, 98, 110, 125, 277
所有修改的地方均包含在名为 "ZhuBo's Modification" 的代码块中，也可以通过搜索整个项目中的 "ZhuBo's Modification" 快速看到改动的地方，方便自己的扩展（比如可以设定图片的最大高度）

转载于:https://www.cnblogs.com/toyman_1298/archive/2011/01/06/1927022.html

dfuy63575

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
FCKeditor介绍

FCKeditor介绍 FCKeditor是一个功能强大支持所见即所得功能的文本编辑器，可以为用户提供微软office软件一样的在线文档编辑服务。它不需要安装任何形式的客户端，兼容绝大多数主流浏览器，支持ASP.Net、ASP、ColdFusion 、PHP、Java、Active-FoxPro、Lasso、Perl、ython 等编程环境。官方网站http://www.fc...
复制链接

扫一扫