前幾天寫了一篇關於基於ASP.NET2.0的FCKeditor的使用心得,由於不少網友要求再寫得詳細些,今天再總結續寫一些。本文所示用的FCKeditor版本是FCKeditor2.2,截至目前這個是最新版本。
FCKeditor相關資料簡介:
官方文檔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,希望本文對你在實際開發中有所幫助。