ASP.NET環境下配置FCKEditor並上傳圖片及其它文件

FCKEditor於2009年被更名爲新一代的CKEditor和CKFinder,見http://ckeditor.com/。只是本來是一個的產品(FCKEditor)現在變成了兩個(CKEditor + CKFinder),如果要上傳文件到服務器上,最新版本的CKEditor + CKFinder要結合使用才能提供編輯界面及搜索文件界面,所以還是暫時用老版本的FCKEditor吧,老版本經過這麼多年的歷練,穩定性應該沒得說了。
 知道FCKEditor的,就不能算是菜鳥了,所以這裏也不多談它是個什麼東東,也不多談它與其它在線html編輯器的對比(有時間的話,發一個適合於ASP.NET環境的主流在線html編輯器對比的博客,不過現在請相信:FCKEditor這個當前名列第一的在線html編輯器的確是貨真價實。)
 下邊,詳細地說明FCKEditor在ASP.NET環境下的配置,並如何設定它可以上傳文件。注意,請嚴格按照說明配置,代碼可以複製完成,如果你在看完本博客還是完成不了FCKEditor的配置,請在下邊評論中留言,說明情況,博主幫助你解決,甚至可以把博主自己配置好的環境給你發到郵箱裏(當然,你要在這個博客紙條裏提供你的郵箱)。當然還是建議自己配置好,因爲用這個工具的都是網站開發人員,如果按說明連這個都拿不下來,何談開發?
 筆者使用的環境是XP3、SQL SERVER EXPRESS 2008、VS2008(C#),注意它同樣適用VS2005及Visual Web Developer這些環境,只要是.NET FRAMEWORK 2.0以上即可
 
1、FCKEditor版本
 當前FCKEditor的最新版本是FCKEditor2.6.5,筆者沒有采用最新的CKEditor + CKFinder組合。
 
2、FCKEditor下載
 到http://ckeditor.com/download下載,下載兩個壓縮文件,分別是FCKeditor_2.6.5.zip 和FCKeditor.Net 2.6.3.zip,注意不要下載網頁最上邊的那個CKEditor 3.1文件,本博文不用這個版本。
 FCKeditor_2.6.5.zip是FCKEditor的頁面運行文件,FCKeditor.Net 2.6.3.zip是爲ASP.NET環境製作的一個控件,最重要的就是裏邊那個.dll文件(後邊會談到)
 
3、FCKEditor解壓及安裝
 最好新建一個網站進行配置,完成後,再對已經建成的ASP.NET網站配置,比如測試本博文的工作情況,筆者建立了一個網站,目錄爲F:/web。解壓FCKeditor_2.6.5.zip 至網站根目錄下的fckeditor中,比如筆者的網站根目錄是F:/web,則將這個壓縮文件解壓到 F:/web/fckeditor 內(注意實際解壓時,會是像這樣的目錄 FCKeditor_2.6.5/fckeditor,把fckeditor這個目錄複製到網站根目錄下即可);解壓另外一個壓縮文件 FCKeditor.Net 2.6.3.zip 到任意目錄,注意把目錄FCKeditor.Net 2.6.3/bin/Release/2.0 下的文件(只有這一個文件)FredCK.FCKeditorV2.dll 複製到網站根目錄下的 /bin/ 目錄內,按筆者的網站,就應該是 F:/web/bin 內。如果你這個網站是剛剛建立的網站,bin目錄可能不存在,手工建立一個即可,注意保證目錄名拼寫正確。這個 .dll 文件是專門爲asp.net 製作的一個控件。在VS2008右邊解決方案資源管理器內點擊“刷新”工具按鈕(右邊數第2個),保證在根目錄下的 bin 目錄內可以看到剛纔複製的 .dll 文件。
 
4、建立FCKEditor控件
 在VS2008左邊工具箱內右擊,點擊快捷菜單中的“選擇項...”,在“選擇工具箱項”對話框中,點擊“瀏覽”按鈕,找到第3步你複製到 bin 目錄內的 .dll 文件,點擊“打開”,再點擊“確定”;再看工具箱最下部的“常規”選項卡下,新添加了一個FCKEditor控件,添加成功。注意現在不要往網頁上拖放,因爲還沒有配置好,即使把它拖放上去,也不能用。
 
5、在VS2008環境中進入fckeditor目錄,打開fckconfig.js文件,找到兩行代碼:
 var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
 var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
 將它們改成:
 var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
 var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
 可以看出這個裏邊有許多語言的選項,默認的是asp, 我們現在已經改成了aspx(紅色是要改的地方)
 
6、在網站根目錄下建立一個 Test.aspx 網頁,複製下邊一行代碼
 <%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>
 把它粘貼到Test.aspx頁面源代碼 <%@ Page Language="C#" ... 那一行下邊(就是粘貼到第二行);
 然後再複製下邊四行代碼
 <form id="Form1" method="post" runat="server">
 <FCKeditorV2:FCKeditor id="content" runat="server" BasePath="~/fckeditor/">
 </FCKeditorV2:FCKeditor>
 </form>
 選定<body> </body>內的全部內容(不含這對起始終止標籤),然後粘貼(實際上是替換<body>...</body>內的全部內容)
 
Well done! 現在可以了,運行之前把這個Test.aspx設爲起始頁,以後測試方便。Crtl + F5 運行,你可以看到瀏覽器內已經出現如下圖所示的FCKEditor編輯界面:
 
點擊第二行的“插入/編輯圖片”按鈕,出來一個對話框,點擊上傳標籤,如下圖所示:
 

再點擊“瀏覽”按鈕,出來就是你熟悉的選擇文件對話框,選定相應的圖片,點擊“打開”,回到上圖的界面,再點擊“發送到服務器上”......??????
 出現錯誤信息了吧,說無法複製。實際上,前述的6個步驟也就是做到這裏:把界面顯示出來,點擊“插入/編輯圖片”按鈕,可以出來對話框,也可以查找文件,但發送到服務器上會失敗。
 前邊的步驟讓我們看到了希望。下邊的步驟我們再耐心做下去,讓發送到服務器上成功!
 
7、配置web.config
 在WEB頁面使用 FCKEditor 時,頁面需要知道到哪裏去找這個編輯器。現在進入 web.config 文件進行配置。打開 web.config,在appSettings配置節中加入(注意:如果是剛剛建立的網站,這個配置節的樣子應該是<appSettings/>,需要把它做成起始與結束標籤,像這樣<appSettings> </appSettings>,然後再向裏邊加入下邊這行代碼):
 <add key="FCKeditor:BasePath" value="~/fckeditor/" />
 在這裏配置好以後,今天加入FCKEditor編輯器控件時,就不用再設定BasePath值;
 用戶上傳文件的缺省目錄是網站根目錄下的 UserFiles 目錄,如果想要更改,同樣要在appSettings配置節中設定,將下邊這一行
 <add key="FCKeditor:UserFilesPath" value="~/wusir/" />
 加入到剛纔加入的那一行下面,今後上傳到服務器的文件,就會放到網站根目錄下的 wusir 目錄內。本步驟完成後,下邊的代碼應該出現在 web.config 文件中(剛纔完成的工作):
 <appSettings>
 <!--設定尋找fckeditor路徑及設定上傳文件保存路徑-->
 <add key="FCKeditor:BasePath" value="~/fckeditor/" />
 <add key="FCKeditor:UserFilesPath" value="~/wusir/" />
 </appSettings>
 要說明的是,在實際應用中,用戶上傳文件目錄最好不是固定的,一個目錄中文件太多,會影響訪問速度,所以用戶上傳文件的目錄,實際應用開發中,建議在代碼中每隔一段時間自動建一個新目錄,比如按年份 + 月份 建目錄。
 
8、啓用文件上傳功能
 FCKeditor提供了強大和易用的文件上傳功能,但是缺省配置中,文件上傳功能不可用,這是基於安全的考慮。我們現在來修改它,使它可以完成上傳功能。至於這個編輯器是在後臺使用還是前臺使用,用到什麼權限,由網站開發人員用程序來設定吧。
 在VS2008中打開 ~/fckeditor/editor/filemanager/connectors/aspx/config.ascx 文件(~在ASP.NET中表示網站根目錄),找到 CheckAuthentication(),將其中唯一的一行語句:
 return false;
 改作:
 return true;
 即不經過身份驗證,任何人都可以上傳文件,修改完成後,關閉並保存這個文件;
 打開 ~/fckeditor/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' ;
 修改完成後,關閉並保存文件。
 從這個配置文件來看,有三種類型,分別是 File, Image, Flash,後兩種都在配置文件中顯式指定,Type=File 沒有指定,應該是缺省的配置,但如果不顯式配置,會出現問題,所以在這裏顯式配置出來。
 
點擊VS2008菜單中的“生成 > 生成網站”,然後點擊“調試 > 開始執行(不調試)”,重複前述的插入圖片的做法,最後點擊“發送到服務器上”,
 


Congratulations!!!
 
一鼓作氣看到這裏,估計讀者累得夠嗆了吧。可以放鬆一下了,因爲主要工作已經完成了。下邊的工作是零碎的細化工作,心態就更放鬆了。
 
9、人性化、中文化FCKEditor
 在解決方案資源管理器中打開 ~/fckeditor/fckconfig.js 文件
 
配置控件語言:
 找到下面的配置行
 FCKConfig.AutoDetectLanguage = true ;
 FCKConfig.DefaultLanguage = 'en' ;
 將其改爲(紅字部分):
 FCKConfig.AutoDetectLanguage = true ;
 FCKConfig.DefaultLanguage = 'zh-cn' ;
 即採用簡體中文作爲缺省語言。細心的讀者已經看到,這裏只改了一行,而筆者是寫出了兩行,實際上是想說明一個問題,可能更細心的讀者已經看到本博文的第一個圖片(就是FCKEditor編輯界面),它已經是中文了,這裏邊即使改成紅顏色的簡體中文,再運行還是一樣的。注意這裏沒有改的第一行,這一行是自動檢測語言,它會自動按瀏覽器的語言設定FCKEditor自己的顯示語言的,所以即使第二行缺省語言在修改前是英語,但實際顯示出來的仍然是中文,因爲它檢測出我的瀏覽器是中文的。妙吧!
 
配置 Tab 鍵:
 默認 Tab 鍵在FCKeditor中不可用,找到配置行
 FCKConfig.TabSpaces = 0 ;
 將其修改爲(紅字部分):
 FCKConfig.TabSpaces = 4 ;
 也就是改成了,按一下 Tab 鍵,縮進4個格,和VS2008編輯器的縮進是一樣的,如果你想改成其它的值,比如3,比如5,你自己看着改吧。
 
爲FCKEditor換膚:
 FCKEditor提供了三個換膚方案:default, office2003和silver。
 找到配置行
 FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
 可以看出現在配置的是缺省的外觀(本博文截圖就是這種外觀),如果想嘗試其它兩種外觀,可以分別改作:
 FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;
 或者
 FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;
 保存以後,運行一下,看看喜歡哪一種。
 
定製工具欄按鈕:
 本博文第一張圖片是一個全功能的按鈕配置,在實際應用中,如果後臺使用FCKEditor,還可以用它,如果是前臺使用,比如論壇、回帖等等,這種配置就易造成安全性問題。這個工具欄按鈕可以手工配置的。
 在 fckconfig.js 中提供兩種工具欄配置。在配置行
 FCKConfig.ToolbarSets["Default"] = [ ... ];
 裏定義了使用全部可用按鈕的配置(作爲工具欄的默認配置)。
 在配置行
 FCKConfig.ToolbarSets["Basic"] = [ ... ];
 中定義了一個精簡按鈕的工具欄配置。如果對這兩個都不滿意,修改定製自己的按鈕集好了。
 配置值[ ... ]中是形式爲[[v, v2, .., vN], '/', [ ... ],...](vN表示要顯示的按鈕名字,'/'表示之後的按鈕組在下一行顯示)的按鈕分組的集合。如果不需要整個分組的按鈕,那麼就刪掉該分組(形式爲 [ , , ...]);如果只是不需要分組中的某個按鈕,刪掉該按鈕。
 注意在修改時,把
 FCKConfig.ToolbarSets["Default"] = [ ... ];
 全部內容複製粘貼在下邊一份,把其中一份註釋掉,修改另外一份,刪除的方法比添加的方法好,這樣安全,規範。修改時,隨時運行網頁,查看實際效果。
 
添加常用中文字體:
 找到配置行
 FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';
 將其修改爲(紅色爲添加部分):
 FCKConfig.FontNames = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';

關閉fckconfig.js,點擊“生成 > 生成網站”,運行,看看修正後的效果。
 
10、FCKEditor瘦身
 如果前邊進展一切順利,把這個網站目錄複製存留一份復件,然後開始進行瘦身。
 因爲FCKEditor是針對所有主流的WEB開發平臺,又針對所有主要國家語言的軟件,而我們現在只用它運行於中文(把英文也考慮進去吧),只運行於ASP.NET平臺,所以我們把其它與此無關的內容刪除。
 首先,在 ~/fckeditor 目錄下,把所有以“_”符號形狀的目錄及文件全部刪除,這樣在 ~/fckeditor 下只有一個 editor 目錄;
 其次,在 ~/fckeditor 目錄下,只保留 fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml 這五個文件,其它一律刪除,如筆者的解決方案資源管理器截圖如下:
 

接着,進入 ~/fckeditor/editor 目錄,刪除其中的 _source 目錄;
 進入 ~/fckeditor/editor/lang 目錄,只留下 en.js, zh-cn.js 和 zh.js 這三個文件,其它文件全部刪除,這些是工具欄語言文件,留下的三個分別是英語、簡體漢字和繁體漢字。
 進入 ~/fckeditor/editor/filemanager/connectors 目錄,這裏有支持各個開發平臺的目錄,只留下 aspx 目錄,其它目錄一概刪除,注意留下那兩個文件吧。
 
好了,大功告成!
 看累了吧,我寫得更累,願這篇博文能夠幫助你解決配置 FCKEditor 方面的問題。如果對你有幫助,請留言說明,如果運行不成功,或者裏面有錯誤的地方,更希望你在留言中指出來。


本文來自CSDN博客,轉載請標明出處:http://blog.csdn.net/lzy_1515/archive/2010/03/22/5405250.aspx

發佈了3 篇原創文章 · 獲贊 2 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章