作者:任搏软
QQ
:
9967030
前几天写了一篇关于基于
ASP.NET2.0
的
FCKeditor
的使用心得,由于不少网友要求再写得详细些,今天再总结续写一些。本文所示用的
FCKeditor
版本是
FCKeditor2.2
,截至目前这个是最新版本。
FCKeditor
相关资料简介:
针对于
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
了,当然后面还有很多需要配置的东西。
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
,希望本文对你在实际开发中有所帮助。
----------------------------------
一张图楼主疏忽了
file:///E:/fck.gif
file:///E:/fck.gif