2.FCKeditor应用在ASP.NET上,需要两组文件,一组是FCKeditor本身,另一个是用于ASP.NET的FCKeditor控件(分为1.1和2.0两个版本,这里使用2.0版本)。 将FCKeditor加入到项目中
解压FCKeditor编辑器,得到文件夹fckeditor,复制此文件夹到Web应用的项目下。
解压FCKeditor控件,将Bin\Debug\2.0\FredCK.FCKeditorV2.dll copy 到网站根目录Bin 下面,再添加引用。
3.FCKeditor廋身
由于FckEditor是支持多语言、多平台的,我们现在要用的是Asp.Net 所以我们只找出我们要用的东西,其它的我们可以除掉。首先带“_”的文件和文件夹可以不要,它们是一些示例。在fckeditor文件夹里我们只留下editor、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml这五个文件,其它的都除掉。在Css里是这个组件用到的样式,我们可以不动它。Dialog里是一些弹出对话框不要动它,Dta也不要动。editor\filemanager\connectors下面我们只要Aspx这一个就够了。这里提供的是我们对上传文件的管理。Lang我们只要Zh-cn.js这个是简体中文,它里面就是所能支持的所有的语言。Js里面是这个组件的核心,我们更是不能动,Plugins里面是一些插件,我们不用去管它,在做例子中我们会用到这里面的上传图片插件,而不用它默认的上传功能。Skin里面有三个皮肤:Default、Office2003,Silver。瘦身到此结束,文件夹大小减小了不少的。最后把fckeditor文件夹Copy到你的网站根目录下面
4.一切搞定,接下来配一下Web.config和fckconfig.js,就能像我们常用的用户自定义控件一样的使用了。
在Web.config的AppSettings中添加
如果你用的是默认的上传功能,则
<add key="FCKeditor:BasePath" value="~/fckeditor/"/>
<add key="FCKeditor:UserFilesPath" value="/网站名称/UploadFiles/"/>
如果你用的是InsertImage插件,则
<add key ="UploadDir" value ="UploadFiles"/>
<add key ="HostName" value ="主机名称\主机IP\http://localhost"/> UploadFiles 是在你网站根目录下的,具有可写入的属性。其下有4个文件夹:image,flash,file,media。
在fckconfig.js中找到FCKConfig.DefaultLanguage=en,修改为zh-cn。接着把
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ;// asp | aspx | cfm | lasso | perl | php | py
修改为aspx。
5.配置FCKeditor
按照FCKeditor的默认配置,可以完成一些常用的HTML可视化编辑工作,但在实际应用中,还需要对其做进一步的配置。FCKeditor控件的可配置属性不多,且配置后只能作用于一个单一实例。实际上,需要对FCKeditor编辑器文件组中的通用配置文件/fckconfig.js和ASP.NET专用文件上传管理代码文件/editor/filemanager/connectors/aspx/config.ascx进行配置。
1. 配置Tab键
默认Tab键在FCKeditor中不可用,可以修改配置行"FCKConfig.TabSpaces = 0;"为1,启用Tab键。
2. 定制FCKeditor工具栏
FCKConfig提供两种工具栏配置。在配置行"FCKConfig.ToolbarSets["Default"] = [ ... ];"中定义了使用全部可用按钮的配置(作为工具栏的默认配置)。在配置行"FCKConfig.ToolbarSets["Basic"] = [ ... ];"中定义了一个精简按钮的工具栏配置。实际使用时,默认配置按钮太多,精简配置按钮又太少。因此需要定制工具栏。
配置值[ ... ]中是形式为[[v, v2, .., vN], '/', [ ... ],...](vN表示要显示的按钮名字,'/'表示之后的按钮组在下一行显示)的按钮分组的集合。如果不需要整个分组的按钮,那么就删掉该分组(形式为[ , , ...]);如果只是不需要分组中的某个按钮,删掉该按钮。
3. 定制可用的文本字体
FCKeditor是外国人做的,默认使用的字体当然也是西文字体了。修改配置行"FCKConfig.FontNames = '...';",加入要使用的中文字体名,如宋体,楷体_GB2312等。
FCKConfig默认使用HTML字体关键字来表示可选的字体大小,这存在着不同浏览器显示效果不一致的问题。因此,建议修改配置行"FCKConfig.FontSizes = '...';",去掉字体关键字值,加入像素值或磅值。(当然,在网页里定义了全局样式表的话,就不需要修改这项设置了,但应该教会最终用户如何设置字体达到最佳显示效果。)
4. 启用文件上传
FCKeditor提供了非常强大和易用的文件上传功能,但是默认配置里,文件上传功能不可用,这是基于安全的考虑。但我认为访问安全性控制应该由程序来做,不应由控件来做。
在文件config.ascx中,修改CheckAuthentication()的返回值为true。如果希望上传具有多扩展名的文件,修改SetConfig()中ForceSingleExtension的值为false。FCKeditor默认可以上传文件、图片、Flash和多媒体四种类型的文件,可以在SetConfig()中对AllowedTypes修改来增减允许的类型(这个类型可以在后面的TypeConfig["TypeName"]中定义,比如在AllowedExtensions属性中定制本类型允许的上传文件扩展名,在DeniedExtensions里定制不允许的上传文件扩展名)。
在文件fckconfig.js中,修改配置行"FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;"为FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=File&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;";修改配置行"FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension ;"为"FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=File' ;"。(在这个配置文件里,看起来似乎Type=File是作为默认参数的,但实际上不加这个参数的话,会出错。)
7. 其它配置
对于这两个配置文件中的配置属性,从名字上很容易知道它们所代表的含义,基本上都可以定制。但要注意,属性值的格式要正确。