详解FCKeditor文本编辑器在.NET环境下的设置和使用!

需要视频教程的朋友可以给我留言或发Emial： [e-mail]

讲师：谢庆龙

制作时间：2007 年4 月12 日

功能简介：

它可以让web 程序拥有如MS Word 这样强大的编辑功能， 目前最新版本为 FCKeditor 2.4.2 。

 

下载地址： http://sourceforge.net/project/showfiles.php?group_id=75348

（要下载 FCKeditor2.4.2.zip 和 FCKeditor.NET 版的 2 个 zip 包）

FCKeditor2.4.2.zip 是其最新的Javascript 文件和图片等；

FCKeditor.NET.zip 是一个 ASP.NET 控件 DLL 文件 。

 

下面结合一个 ASP.NET2.0 的项目来具体看看 FCKeditor 的安装、配置、使用。在开始之前请先下载 FCKeditor 文件包和 FCKeditor.Net  服务器控件。启用 VWD2005 新建一个 C# 的 WEB Site 工程，取名 FCKPro 。

FCKeditor 安装：

所谓安装就是一个简单的拷贝过程。

把下载的FCKeditor2.4.2.zip 文件包直接解压缩到FCKPro 的根目录下，这样根目录下就得到一个FCKeditor 文件夹，里面富含所有FCKeditor 的核心文件。

然后把下载的FCKeditor.Net.zip 随便解压缩到你硬盘的一个空目录，里面是FCKeditor.Net 的源代码，你可以对它进行再度开发，本文尚不涉及本内容，我们只是直接使用其目录下的\bin \Debug 目录 中的FredCK.FCKeditorV2.dll 文件。

在VS2005 中添加对FredCK.FCKeditorV2.dll 的引用：

1. 在FCKPro 工程浏览器上右键，选择添加引用（Add Reference… ），找到浏览(Browse) 标签，然后定位到你解压好的FredCK.FCKeditorV2.dll ，确认就可以了。这时，FCKPro 工程目录下就多了一个bin 文件夹，里面包含FredCK.FCKeditorV2.dll 文件。当然，你也可以完全人工方式的来做，把FredCK.FCKeditorV2.dll 直接拷贝到FCKPro\bin\ 下面，VS2005 在编译时会自动把它编译进去的。

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

至此，你已经完成了FCKeditor 的安装，并可以在你的项目中使用FCKeditor 了，当然后面还有很多需要配置的东西。

 

FCKeditor 详细的设置：

进入 FCKeditor 文件夹，编辑 fckconfig.js 文件。

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

修改

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

var _QuickUploadLanguage = 'asp' ; // 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' ,'-' ,'About' ]

为

FCKConfig.ToolbarSets["Basic"] = [

['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']

] ;

这是我改过的 Basic ，把图像功能去掉，把添加链接功能去掉，因为图像和链接和 flash 和图像按钮添加功能都能让前台页直接访问和上传文件，要是这儿不改直接给你上传个木马还不马上玩完？

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

FCKPro 工程项目的设置：

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

 <appSettings>

    <add key="FCKeditor:BasePath" value="/ 项目名称/fckeditor/"/>

    <add key="FCKeditor:UserFilesPath" value="/ 项目名称/Files/" />

</appSettings>

说明：BasePath 是fckeditor 所在路径，fckeditor 由于我们直接放网站目录下这样写就可以，如果您的网站多放几层适当调整即可。UserFilesPath 是所有上传的文件的所在目录。我们新建了一个Files 文件夹放在了项目中做为上传文件的所在目录，这里为了方便，但由于考虑到安全性，我们建议Files 要单独做wwwroot 目录下的一个站点比较好，和我们的站点FCKEditor 平行。不要把它放FCKEditor 里，为什么呢？因为Files 是要让客户有写的权限的，如果放FCKEditor 下很危险。Files 目录要有写的权限。你根据自己网站需求设置那个帐号，本文为方便设置User 实际中你可能用ASP.NET 帐号更合理。

2 、 在 FCKpro 工程项目中编写一个最简单的页面

<% @ Page Language ="C#"  AutoEventWireup ="true"    CodeFile ="Default.aspx.cs"  Inherits ="_Default" validateRequest ="false"  %>

 

<% @ Register Assembly ="FredCK.FCKeditorV2" Namespace ="FredCK.FCKeditorV2" TagPrefix ="FCKeditorV2" %>

// 这里要主要两个参数

// 默认为 <% @ Page Language ="C#"  AutoEventWireup ="true"    CodeFile ="Default.aspx.cs"  Inherits ="_Default" %>

// 我们要添加一个参数 validateRequest=false ，否则提交带 html 代码的内容会报错

// 从客户端 (...) 中检测到有潜在危险的 Request.Form 值。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head runat ="server">

    < title > 无标题页</ title >

</ head >

< body >

    < form id ="form1" runat ="server">

    < div >

        < FCKeditorV2 : FCKeditor ID ="FCKeditor1" runat ="server">

        </ FCKeditorV2 : FCKeditor >

        &nbsp; </ div >

    </ form >

</ body >

</ html >

如何获取其内容呢？读取 FCKeditor1 控件的 Value 属性值即可。

 

结束语：现在的文本编辑器很多， FCKeditor 算是一个比较难用的东东， 还有个类似的控件 FreeTextBox 也很好用，不过它的最新版似乎收费了。

FCKeditor 精简版的制作方法（附）。

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

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

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

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

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

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

至此，文件精简完毕，由原来的 2.55M 变成现在的 797K 了。接着修改设置。