FCKeditor2.2+ASP.NET2.0不完全攻略

作者：任搏软

Website ： http://www.wrestsoft.com

技术 Blog ： http://dsclub.cnblogs.com

My Space ： http://www.myspace.com/dsclub

QQ ： 9967030

 

前几天写了一篇关于基于 ASP.NET2.0 的 FCKeditor 的使用心得，由于不少网友要求再写得详细些，今天再总结续写一些。本文所示用的 FCKeditor 版本是 FCKeditor2.2 ，截至目前这个是最新版本。

 

FCKeditor 相关资料简介：

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

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

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

官方演示 http://www.fckeditor.net/demo/default.html

 

 

针对于 ASP.NET 开发者来说，你有两种选择：

1.        只使用 FCKeditor ，下载 http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845 ，然后自行配置其中的几个核心 js 文件。对此发开不作为本文所讨论的范畴。

2.        使用 FCKeditor.Net ，下载 http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125 。需要声明的是，这个文件只是一个 ASP.NET 控件 DLL 文件，并不包括 FCKeditor 的编辑器内核。所以你还应该下载上一种方式中提到的文件包。

 

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

 

FCKeditor 安装：

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

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

然后把下载的 FCKeditor.Net_2.2.zip 随便解压缩到你硬盘的一个空目录，里面是 FCKeditor.Net 的源代码（基于 .NET1.1 的 C# 工程），你可以用 VS2003 来对它进行再度开发，本文尚不涉及本内容，我们只是直接使用 FCKeditor.Net 工程目录下的 /bin/Release 目录中的 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 在 ASP.NET2.0 Web 项目中的配置：

现在，我开始来把 FCKeditor 应用在我们的项目中。打开 Default.aspx ，切换到设计模式（ Design ），把 FCKeditor 控件从工具箱上拖动下来，在 Default 页上你就可以看到这个 FCKeditor 了，不过这时只能看到一个 FCKeditor 的站位框，不会看到运行时的效果，鼠标选中 FCKeditor1 后，在属性（ Property ）面板上可以设置这个 FCKeditor 对象的一些基本属性。比较重要的是 BasePath 属性，如果先前 FCKeditor 就定在了根目录的 FCKeditor 下，就设置成 ~/FCKeditor/ ，如果是别的目录名就换成相应的值（注意：控件默认值是 /FCKeditor/ ，因为我们使用的是服务器控件设置了 runat ="server" 属性所以要显式的声明 BasePath ="~/FCKeditor/" ）。把 Default.aspx 切换到源代码模式（ Source ），我们可以看到 IDE 自动生成的代码：

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

 

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

 

如果当初没有把 FCKeditor 添加到工具箱上，那么应该在添加引用后自己手动来添加这些代码。

在源代码模式下，把鼠标点在 FCKeditorV2 : FCKeditor 标签内容上，它会加粗显示，这时属性面板上显示出了 FCKeditor 服务器控件的全部属性，比在设计模式时多出了许多。

属性列表：

AutoDetectLanguage	BaseHref	BasePath	ContentLangDirection
CustomConfigurationsPath	Debug	DefaultLanguage	EditorAreaCSS
EnableSourceXHTML	EnableViewState	EnableXHTML	FillEmptyBlocks
FontColors	FontFormats	FontNames	FontSizes
ForcePasteAsPlainText	ForceSimpleAmpersand	FormatIndentator	FormatOutput
FormatSource	FullPage	GeckoUseSPAN	Height
ID	ImageBrowserURL	LinkBrowserURL	PluginsPath
runat	SkinPath	StartupFocus	StylesXMLPath
TabSpaces	ToolbarCanCollapse	ToolbarSet	ToolbarStartExpanded
UseBROnCarriageReturn	Value	Visible	Width

事件列表：

OnDataBinding

OnDisposed

OnInit

OnLoad

OnPreRender

OnUnload

 

以上属性和事件的使用在此不一一的赘述了，请先自行摸索一下，目前我也没找到相关资料，不过都不是很难，如果你有在 asp 下使用 FCKeditor 的经验，应该明白其中一些属性的意义，和 fckconfig.js 的设置项意义相同。以后有时间我会再把这部分整理好。需要说明的是 FCKeditor2.2 的 fckconfig.js 和 2.0 版本的有了较大改进，体积更小，配置方式也更加灵活，具体请自行下载比较。

针对这个示例我配置的代码如下：

<FCKeditorV2:FCKeditor

    ID="FCKeditor1"

    runat="server"

    AutoDetectLanguage="false"

    DefaultLanguage="zh-cn"

    BasePath="~/FCKeditor/">

</FCKeditorV2:FCKeditor>

好，现在运行一下这个页面，允许修改 Web.Config （这样 IDE 会自动在工程下添加一个 Web.Config 文件）。看到效果了吧！

有人会问：怎么得到一个 HTTP Error 404 - Not Found. 的错误呢？得到这个错误一般是 BasePath 没有设置正确，参看上述提到的 BasePath 注意事项仔细检查！

到了这里， FCKeditor 的配置并没有真正的完成，因为它里面的一个强大功能我们还没正确配置：文件上传。

在 Default.aspx 的运行模式下，点 FCKeditor 的“插入 / 编辑图像”（又或者是 Flash ）功能，在弹出框点“浏览服务器”，又弹出一个对话框，此时随即出现的是一个错误提示框 XML request error: Forbidden(403).

得到这样的错误有 Web 开发经验的都知道 403 应该是读写权限的问题。可是为什么呢？原因在于没有配置 UserFiles 路径。

我们在 FCKPro 根目录下，新建一个空目录 Files 。连同 BasePath 的设置通常的做法是这样的：

打开 FCKPro 工程的 Web. Config 文件，修改 appSettings 元素，配置如下：

<appSettings>

 <add key="FCKeditor:BasePath"value="~/FCKeditor/"/>

 <add key="FCKeditor:UserFilesPath"value="/FCKPro/Files" />

</appSettings>

设置了 FCKeditor:BasePath 后就不用再每次使用 FCKeditor 实例时指定 BasePath 属性了， FCKeditor:UserFilesPath 则是制定我们所有上传的文件的所在目录。你也许会问为什么要设置成 /FCKPro/Files 这样而不是 ~/Files ，因为 FCKeditor 使用这个值来返回你上传后的文件的相对路径到客户端， ~/Files 的形式是 ASP.NET 在服务可以编译解释的，但是在客户端的静态就不懂这是什么了。如果使用 ~/Files 后，那么所有上传文件的返回路径都是 ~/Files 形式的，你就会得到这样的链接 http://~/Files/Image/logo.gif 这样的链接解果就是路径为找到。所以才要我们上述那样设置，这是在开发阶段，如果在工程完成后发布时请记住把 /FCKPro/Files 改成 /Files ，道理不说大家也明白，开发阶段 VS2005 在运行项目时的 URL 是 http://localhost/项目名称/ 的形式，发布后在 Server 上建立站点，跟路径就是 http://www.abc.com/ 的形式了，所以发布后一定要改过来。这些地方是在使用 FCKeditor2.2+ASP.NET2.0 时经常发错误而又莫名其所云的地方。

先不要高兴，这个上传的功能至此还差最关键的一步。在 FCKeditor 所在根目录下（ FCKPro/FCKeditor/ ）找到 fckconfig.js 文件，用文本编辑器打开，在大概 132 行（大概是因为之前您也许参考其它资料更改过这个文件了）的地方找到：

 

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

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

 

把这两行赋值代码的值由 asp 改成 aspx ，保存关闭这个文件。

好了，大功告成了！在此运行 FCKPro 项目，使用浏览服务器功能， OK 了吧？

 

再提一下：

对于开发中使用文件上传功能遇到 XML request error: Internal Server Error(500) 错误的解决办法。

遇到 500 内部错误是怎么回事呢？

因为 ASP.NET2.0 新增了 Theme 功能，所以如果在你的工程中你对 Web.config 使用到了 styleSheetTheme 或 theme 的 话那就要再多修改一下。

还是到 FCKeditor 所在的目录，分别打开 /editor/filemanager/upload/aspx/upload.aspx 和 /editor/filemanager/browser/default/connectors/aspx/connector.aspx 两个 aspx 文件，在 page 标签中添加 Theme="" 或 StyleSheetTheme="" 看你在工程使用的是什么就修改什么。修改后如下：

<% @ Page language="c#" Inherits="FredCK.FCKeditorV2.Uploader" AutoEventWireup="false" Theme="" %>

或

<% @ Page language="c#" Inherits="FredCK.FCKeditorV2.Uploader" AutoEventWireup="false" StylesheetTheme="" %>

这样就解决了 500 的内部错误。

 

有关对 FCKeditor 减肥的方法在此就不做说明了，网上很多资料都提到过，相信已经搞 ASP.NET 的你应该会正确使用 Google 的。

 

总之，对 FCKeditor 这样的好东西总应该好好研究一番的才 OK ，希望本文对你在实际开发中有所帮助。

FCKeditor2.2+ASP.net2.0

使用FCKEditor服务器控件，看着Frederico Caldeira Knabben的Wiki里面对于ASP.NET的使用介绍基本都应该没问题。
我也google了大量关于FCKEditor的使用的资料，不过感觉大多是对2.0版本的使用介绍。2.2在fckcongif.js文件上又有了变化，使用更方便。
而且，使用FCKEditor的服务器控件不用在它的fckcongif.js进行什么设置了，因为服务器控件扩展了很多属性，具体在Wiki都有介绍和说明。
主要是减肥，参看网上其他的资料都应该没问题。
主要是一个问题，困惑了我一下午，不过最后解决起来真想抽自己：
在Wiki上针对ASP.NET2.0上使用FCKEditor服务器控件有特别介绍说明：
Special note if you are using Asp.net 2.0 and themes: you must open up /editor/filemanager/upload/aspx/upload.aspx and editor/filemanager/browser/default/connectors/aspx/connector.aspx and modify the first line to add Theme="" 
as follows: 

<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" Theme="" %>  

如果不是这样设置的话，会在上传、浏览服务器等功能时得到一个"XML Request Error: Server Error (500)"的错误。
我按照上述设置后还是得到这个错误！！！
后来发现我在web.config里使用的是<pages styleSheetTheme="Default"/>所以自然应该在上述两个文件里设置 styleSheetTheme=""，随后问题解决了。

还有个问题，发现

<appSettings>  
   <add key="FCKeditor:UserFilesPath" value="/Wherever/Files" />  
</appSettings> 

也是有问题的，不能设置成value="~/Files"否则，你最终通过脚本得到的相对路径也是~/Files/...的形式，只能是"/Files"这样的形式，所以在发布后一定要再改一下web.config的设置。只要逻辑上路径正确就OK！

FCKeditor2.2无法使用上传功能的解决！

那天QQ上有个网友问我FCKeditor2.2的上传功能无法使用，怎么配置congif也都没有反应，并且我的文章里也没有对此进行什么说明。

 

刚刚看了一下，发现FCKeditor2.2在经历这次重大配置变革后出现了一个错误，所以导致无法使用上传功能！

 

FCKConfig.QuickUploadLanguage在config里多次出现被调用，但是并没有给初始值。

 

打开fckconfig.js

 

针对ASP.net然后设置：

 

var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php
//FCKEditor 漏掉了这句
FCKConfig.QuickUploadLanguage = 'aspx';

 

然后，再运行就OK了。