作者:任搏軟 Website:http://www.wrestsoft.com 技術Blog:http://dsclub.cnblogs.com My Space:http://www.myspace.com/dsclub QQ:9967030 前幾天寫了一篇關於基於ASP.Net2.0的FCKeditor的使用心得,由於不少網友要求再寫得詳細些,今天再總結續寫一些。本文所示用的FCKeditor版本是FCKeditor2.2,截至目前這個是最新版本。
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的內部錯誤。 有關對FCKeditor減肥的方法在此就不做說明了,網上很多資料都提到過,相信已經搞ASP.Net的你應該會正確使用Google的。 總之,對FCKeditor這樣的好東西總應該好好研究一番的才OK,希望本文對你在實際開發中有所幫助。 ---------------------------------- 一張圖樓主疏忽了
https://www.aspphp.online/bianchen/UploadFiles_4619/201701/2017011310502748.gif