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

[align=left]作者：任搏软[/align]
[align=left]Website：http://www.wrestsoft.com[/align]
[align=left]技术Blog：http://dsclub.cnblogs.com[/align]
[align=left]My Space：http://www.myspace.com/dsclub[/align]
[align=left]QQ：9967030[/align]
[align=left] [/align]
[align=left]前几天写了一篇关于基于ASP.NET2.0的FCKeditor的使用心得，由于不少网友要求再写得详细些，今天再总结续写一些。本文所示用的FCKeditor版本是FCKeditor2.2，截至目前这个是最新版本。[/align]
[align=left] [/align]
[align=left]FCKeditor相关资料简介：[/align]
[align=left]官方网站http://www.fckeditor.net/[/align]
[align=left]官方文档http://wiki.fckeditor.net/[/align]
[align=left]下载地址http://www.fckeditor.net/download/default.html[/align]
[align=left]官方演示http://www.fckeditor.net/demo/default.html[/align]
[align=left] [/align]
[align=left] [/align]
[align=left]针对于ASP.NET开发者来说，你有两种选择：[/align]
[align=left]1.        只使用FCKeditor，下载http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845，然后自行配置其中的几个核心js文件。对此发开不作为本文所讨论的范畴。[/align]
[align=left]2.        使用FCKeditor.Net，下载http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125。需要声明的是，这个文件只是一个ASP.NET控件DLL文件，并不包括FCKeditor的编辑器内核。所以你还应该下载上一种方式中提到的文件包。[/align]
[align=left] [/align]
[align=left]下面结合一个ASP.NET2.0的项目来具体看看FCKeditor的安装、配置。在开始之前请先下载FCKeditor文件包和FCKeditor.Net 服务器控件。启用VS2005新建一个C#的WEB Site工程，取名FCKPro。[/align]
[align=left] [/align]
[align=left]FCKeditor安装：[/align]
[align=left]所谓安装就是一个简单的拷贝过程。[/align]
[align=left]把下载的FCKeditor_2.2.zip文件包直接解压缩到FCKPro的根目录下，这样根目录下就得到一个FCKeditor文件夹，里面富含所有FCKeditor的核心文件。[/align]
[align=left]然后把下载的FCKeditor.Net_2.2.zip随便解压缩到你硬盘的一个空目录，里面是FCKeditor.Net的源代码（基于.NET1.1的C#工程），你可以用VS2003来对它进行再度开发，本文尚不涉及本内容，我们只是直接使用FCKeditor.Net工程目录下的/bin/Release目录中的FredCK.FCKeditorV2.dll文件。[/align]
[align=left]在VS2005中添加对FredCK.FCKeditorV2.dll的引用：[/align]
1.        在FCKPro工程浏览器上右键，选择添加引用（Add Reference…），找到浏览(Browse)标签，然后定位到你解压好的FredCK.FCKeditorV2.dll，确认就可以了。这时，FCKPro工程目录下就多了一个bin文件夹，里面包含FredCK.FCKeditorV2.dll文件。当然，你也可以完全人工方式的来做，把FredCK.FCKeditorV2.dll直接拷贝到FCKPro/bin/下面，VS2005在编译时会自动把它编译进去的。
[align=left]2.        为了方便RAD开发，我们把FCKeditor控件也添加到VS的工具箱（Toolbox）上来，展开工具箱的常用标签组（General），右键选择组件（Choose Items…），在对话框上直接找到浏览按钮，定位FredCK.FCKeditorV2.dll，然后确认就可以了。这时工具箱呈现

我的经验告诉我，这样会省去很多在开发时使用FCKeditor控件时要添加的声明代码。[/align]
[align=left] [/align]
[align=left]至此，你已经完成了FCKeditor的安装，并可以在你的项目中使用FCKeditor了，当然后面还有很多需要配置的东西。[/align]
[align=left] [/align]
[align=left]FCKeditor在ASP.NET2.0 Web项目中的配置：[/align]
[align=left]现在，我开始来把FCKeditor应用在我们的项目中。打开Default.aspx，切换到设计模式（Design），把FCKeditor控件从工具箱上拖动下来，在Default页上你就可以看到这个FCKeditor了，不过这时只能看到一个FCKeditor的站位框，不会看到运行时的效果，鼠标选中FCKeditor1后，在属性（Property）面板上可以设置这个FCKeditor对象的一些基本属性。比较重要的是BasePath属性，如果先前FCKeditor就定在了根目录的FCKeditor下，就设置成~/FCKeditor/，如果是别的目录名就换成相应的值（注意：控件默认值是/FCKeditor/，因为我们使用的是服务器控件设置了runat="server"属性所以要显式的声明BasePath="~/FCKeditor/"）。把Default.aspx切换到源代码模式（Source），我们可以看到IDE自动生成的代码：[/align]

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

[align=left] [/align]

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

[align=left] [/align]
[align=left]如果当初没有把FCKeditor添加到工具箱上，那么应该在添加引用后自己手动来添加这些代码。[/align]
[align=left]在源代码模式下，把鼠标点在FCKeditorV2:FCKeditor标签内容上，它会加粗显示，这时属性面板上显示出了FCKeditor服务器控件的全部属性，比在设计模式时多出了许多。[/align]
[align=left]属性列表：[/align]

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

[align=left]事件列表：[/align]

[align=left]OnDataBinding[/align]

[align=left]OnDisposed[/align]

[align=left]OnInit[/align]

[align=left]OnLoad[/align]

[align=left]OnPreRender[/align]

[align=left]OnUnload[/align]

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

<FCKeditorV2:FCKeditor
    ID="FCKeditor1"
    runat="server"
    AutoDetectLanguage="false"
    DefaultLanguage="zh-cn"
    BasePath="~/FCKeditor/">
</FCKeditorV2:FCKeditor>

[align=left]好，现在运行一下这个页面，允许修改Web.Config（这样IDE会自动在工程下添加一个Web.Config文件）。看到效果了吧！[/align]
[align=left]有人会问：怎么得到一个HTTP Error 404 - Not Found.的错误呢？得到这个错误一般是BasePath没有设置正确，参看上述提到的BasePath注意事项仔细检查！[/align]
[align=left]到了这里，FCKeditor的配置并没有真正的完成，因为它里面的一个强大功能我们还没正确配置：文件上传。[/align]
[align=left]在Default.aspx的运行模式下，点FCKeditor的“插入/编辑图像”（又或者是Flash）功能，在弹出框点“浏览服务器”，又弹出一个对话框，此时随即出现的是一个错误提示框XML request error: Forbidden(403).[/align]
[align=left]得到这样的错误有Web开发经验的都知道403应该是读写权限的问题。可是为什么呢？原因在于没有配置UserFiles路径。[/align]
[align=left]我们在FCKPro根目录下，新建一个空目录Files。连同BasePath的设置通常的做法是这样的：[/align]
[align=left]打开FCKPro工程的Web. Config文件，修改appSettings元素，配置如下：[/align]

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

[align=left]设置了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时经常发错误而又莫名其所云的地方。[/align]
[align=left]先不要高兴，这个上传的功能至此还差最关键的一步。在FCKeditor所在根目录下（FCKPro/FCKeditor/）找到fckconfig.js文件，用文本编辑器打开，在大概132行（大概是因为之前您也许参考其它资料更改过这个文件了）的地方找到：[/align]
[align=left] [/align]

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

[align=left] [/align]
[align=left]把这两行赋值代码的值由asp改成aspx，保存关闭这个文件。[/align]
[align=left]好了，大功告成了！在此运行FCKPro项目，使用浏览服务器功能，OK了吧？[/align]
[align=left] [/align]
[align=left]再提一下：[/align]
[align=left]对于开发中使用文件上传功能遇到 XML request error: Internal Server Error(500) 错误的解决办法。[/align]
[align=left]遇到500内部错误是怎么回事呢？[/align]
[align=left]因为ASP.NET2.0新增了Theme功能，所以如果在你的工程中你对Web.config使用到了styleSheetTheme或theme的话那就要再多修改一下。[/align]
[align=left]还是到FCKeditor所在的目录，分别打开/editor/filemanager/upload/aspx/upload.aspx和/editor/filemanager/browser/default/connectors/aspx/connector.aspx两个aspx文件，在page标签中添加Theme=""或StyleSheetTheme=""看你在工程使用的是什么就修改什么。修改后如下：[/align]
[align=left]<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.Uploader" AutoEventWireup="false" Theme="" %>[/align]
[align=left]或[/align]
[align=left]<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.Uploader" AutoEventWireup="false" StylesheetTheme="" %>[/align]
[align=left]这样就解决了500的内部错误。[/align]
[align=left] [/align]
[align=left]有关对FCKeditor减肥的方法在此就不做说明了，网上很多资料都提到过，相信已经搞ASP.NET的你应该会正确使用Google的。[/align]
[align=left] [/align]
[align=left]总之，对FCKeditor这样的好东西总应该好好研究一番的才OK，希望本文对你在实际开发中有所帮助。
FCKeditor2.2+ASP.net2.0 [/align]
使用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了。