FCKeditor 2.2 + Asp.Net 設定

FCKeditor相關資料簡介：

官方網站http://www.fckeditor.net/

官方文檔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的內部錯誤。