一、集成方法
FCKeditor應(yīng)用在ASP.NET上,需要兩組文件,一組是FCKeditor本身,另一個(gè)是用于ASP.NET的FCKeditor控件(分為1.1和2.0兩個(gè)版本,這里使用2.0版本)。
1. 將FCKeditor加入到項(xiàng)目中
解壓FCKeditor編輯器,得到文件夾fckeditor,復(fù)制此文件夾到Web應(yīng)用的項(xiàng)目下(也可以是子孫目錄下)。
解壓FCKeditor控件,在其子目錄bin/Release/2.0下有一個(gè)程序集。在Web應(yīng)用的項(xiàng)目中引用該程序集。
2. 在頁(yè)面中使用FCKeditor
有兩種方式。
(1)手工編碼
在頁(yè)面中加入ASP.NET指令:
<%@ Register Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
然后在需要的地方加入FCKeditor控件:
<FCKeditorV2:FCKeditor id="FCKeditor1" runat="server" />
(2)集成到Visual Studio工具箱
打開一ASP.NET頁(yè)面,展開Toolbox,打開右鍵菜單,選擇“Choose Items ...”,在出現(xiàn)的“Choose Toolbox Items”會(huì)話框的“.NET Framework Components”選項(xiàng)卡中選擇“Browse”,找到并選中FCKeditor程序集,打開后回到“Choose Toolbox Items”窗口,點(diǎn)擊“OK”,完成控件導(dǎo)入。
這時(shí),在Toolbox的General分類下出現(xiàn)了一個(gè)名為FCKeditor的控件,可以像使用Visual Studio內(nèi)置控件一樣使用它。
3. 配置FCKeditor編輯器路徑
在頁(yè)面中,使用的是FCKeditor控件,該控件需要知道FCKeditor編輯器文件組的路徑。有兩種配置方法。
(1)配置web.config
在appSettings配置節(jié)中加入
<add key="FCKeditor:BasePath" value="~/PathOfFCKeditor/" />
使用這種配置方法后,對(duì)于項(xiàng)目中任何一個(gè)頁(yè)面中用到的FCKeditor控件,都不用再配置其BasePath屬性。
(2)直接對(duì)用到的FCKeditor控件進(jìn)行配置
在頁(yè)面代碼中設(shè)置FCKeditor的屬性BasePath為FCKeditor編輯器文件組的路徑,或者在Page_Init事件處理器中設(shè)置其BasePath的值。
4. 配置FCKeditor編輯器文件上傳路徑
在web.config的appSettings配置節(jié)中加入
<add key="FCKeditor:UserFilesPath" value="~/YourUploadFilePath" />
這樣,就完成了FCKeditor向ASP.NET頁(yè)面的集成工作。
二、配置FCKeditor
按照FCKeditor的默認(rèn)配置,可以完成一些常用的HTML可視化編輯工作,但在實(shí)際應(yīng)用中,還需要對(duì)其做進(jìn)一步的配置。FCKeditor控件的可配置屬性不多,且配置后只能作用于一個(gè)單一實(shí)例。實(shí)際上,需要對(duì)FCKeditor編輯器文件組中的通用配置文件/fckconfig.js和ASP.NET專用文件上傳管理代碼文件/editor/filemanager/connectors/aspx/config.ascx進(jìn)行配置。
1. 配置控件語(yǔ)言
FCKeditor是自動(dòng)探測(cè)瀏覽器所使用的語(yǔ)言編碼的,其默認(rèn)語(yǔ)言是英文。修改配置行"FCKConfig.DefaultLanguage = 'en';"為'zh-cn',采用中文為默認(rèn)語(yǔ)言。
2. 配置控件應(yīng)用技術(shù)
FCKeditor默認(rèn)是用于php技術(shù)的。修改配置行"var _FileBrowserLanguage = 'php';"和"var _QuickUploadLanguage = 'php';"為'aspx',采用ASP.NET技術(shù)。
3. 配置Tab鍵
默認(rèn)Tab鍵在FCKeditor中不可用,可以修改配置行"FCKConfig.TabSpaces = 0;"為1,啟用Tab鍵。
4. 定制FCKeditor工具欄
FCKConfig提供兩種工具欄配置。在配置行"FCKConfig.ToolbarSets["Default"] = [ ... ];"中定義了使用全部可用按鈕的配置(作為工具欄的默認(rèn)配置)。在配置行"FCKConfig.ToolbarSets["Basic"] = [ ... ];"中定義了一個(gè)精簡(jiǎn)按鈕的工具欄配置。實(shí)際使用時(shí),默認(rèn)配置按鈕太多,精簡(jiǎn)配置按鈕又太少。因此需要定制工具欄。
配置值[ ... ]中是形式為[[v, v2, .., vN], '/', [ ... ],...](vN表示要顯示的按鈕名字,'/'表示之后的按鈕組在下一行顯示)的按鈕分組的集合。如果不需要整個(gè)分組的按鈕,那么就刪掉該分組(形式為[ , , ...]);如果只是不需要分組中的某個(gè)按鈕,刪掉該按鈕。
5. 定制可用的文本字體
FCKeditor是外國(guó)人做的,默認(rèn)使用的字體當(dāng)然也是西文字體了。修改配置行"FCKConfig.FontNames = '...';",加入要使用的中文字體名,如宋體,楷體_GB2312等。
FCKConfig默認(rèn)使用HTML字體關(guān)鍵字來(lái)表示可選的字體大小,這存在著不同瀏覽器顯示效果不一致的問(wèn)題。因此,建議修改配置行"FCKConfig.FontSizes = '...';",去掉字體關(guān)鍵字值,加入像素值或磅值。(當(dāng)然,在網(wǎng)頁(yè)里定義了全局樣式表的話,就不需要修改這項(xiàng)設(shè)置了,但應(yīng)該教會(huì)最終用戶如何設(shè)置字體達(dá)到最佳顯示效果。)
6. 啟用文件上傳
FCKeditor提供了非常強(qiáng)大和易用的文件上傳功能,但是默認(rèn)配置里,文件上傳功能不可用,這是基于安全的考慮。但我認(rèn)為訪問(wèn)安全性控制應(yīng)該由程序來(lái)做,不應(yīng)由控件來(lái)做。
在文件config.ascx中,修改CheckAuthentication()的返回值為true。如果希望上傳具有多擴(kuò)展名的文件,修改SetConfig()中ForceSingleExtension的值為false。FCKeditor默認(rèn)可以上傳文件、圖片、Flash和多媒體四種類型的文件,可以在SetConfig()中對(duì)AllowedTypes修改來(lái)增減允許的類型(這個(gè)類型可以在后面的TypeConfig["TypeName"]中定義,比如在AllowedExtensions屬性中定制本類型允許的上傳文件擴(kuò)展名,在DeniedExtensions里定制不允許的上傳文件擴(kuò)展名)。
在文件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' ;"。(在這個(gè)配置文件里,看起來(lái)似乎Type=File是作為默認(rèn)參數(shù)的,但實(shí)際上不加這個(gè)參數(shù)的話,會(huì)出錯(cuò)。)
7. 其它配置
對(duì)于這兩個(gè)配置文件中的配置屬性,從名字上很容易知道它們所代表的含義,基本上都可以定制。但要注意,屬性值的格式要正確。
三、將FCKeditor編輯器文件組ASP.NET化
FCKeditor編輯器文件組包含了用于它所支持的各種應(yīng)用技術(shù)的文件,所以,對(duì)于ASP.NET應(yīng)用來(lái)說(shuō),有很多文件是不需要的。
根目錄下,只保留文件夾editor,文件fckconfig.js、fckeditor.js、fckpackager.xml、fckstyles.xml和fcktemplates.xml。
子目錄editor/filemanager/connectors下,只保留文件夾aspx。