.NET Factory

最近不曉得怎麼搞的心血來潮，就上網找了個HtmlEditor工具，拜Google大神所賜找到了不少Free 的工具(FreeTextBox, FCKeditor...等)，最後我選擇了FCKeditor這個功能強大的控制項，順便就在這裡介紹給各位。

Step 1 - 下載FCKeditor控制項

首先我們先到FCKeditor官方網站下載要用到的控制項

網址: http://www.fckeditor.net/ *筆者在寫此篇文章時控制項版本為FCKeditor2.4.3

• FCKeditor 2.4.3 (Latest Stable)
• FCKeditor.NET (ASP.NET Control to easily integrate FCKeditor on .net Web Pages.)

 

Step 2 - 控制項加入參考

• 接著將FCKeditor控制項加入我們的WebApplication。
• 請在您的專案上按下滑鼠右鍵 -> 【加入參考】 -> 並【瀏覽】到您剛下載的控制項按下確定。(如下圖)

 

Step 3 - 複製相關環境檔案到Web Application

• 再來我們將FCKeditor運行時所需要的相關環境檔案複製到Web Application.完成後就如下圖所示。

 

Step 4 - 將控制項加入Visual Studio工具箱

• 首先將滑鼠移至我們的Visual Studio工具箱上面，並在空白之處點選滑鼠右鍵，選擇【選擇項目】這個選項。
• 接著再【選擇工具箱項目】這個視窗中，選擇【.NET Framework】這個標籤，按下【瀏覽】選擇FCKeditor控制項，這時候您的工具箱中就會多出了一個新的控制項。(如圖)

 

 Step 5 - 修改 fckconfig.js

• 修改FCKeditor_2.3.2\FCKeditor\fckconfig.js

          var _FileBrowserLanguage= 'aspx' ;

          var _QuickUploadLanguage= 'aspx' ;

 

 Step 6 - 實際測試FCKeditor

呼...終於完成繁雜的佈署程序，開始來體驗FCKeditor的強大功能。 ^_^

我們實際將FCKeditor控制項，從工具箱中拖拉到WebForm上面，並執行後竟然出現下面這個錯誤訊息 ~"~...

真是Orz...

筆者實測後發現原來是控制項的BasePath這個屬性需要指向運行環境相關資料的目錄。

P.S若您是跟我一樣放在根目錄下的話，把BasePath屬性改為 ~/FCKeditor/ 即可。

 現在我們重新執行看看，哇~~成功了(感動 >_<")。

 

Step 7 - 相關參數設定

• 設定圖片上傳

         聰明的您在使用FCKeditor時有沒有發現圖片上傳功能無法使用(不會是BUG吧 ~"~)

         這是因為還沒有設定圖片上傳的參數的關係。

         打開Web.config在<appSettings></appSettings>中加入FCKeditor:UserFilesPath

         並指定其值value為您所要上傳的目錄，就大功告成了。        

• 更改FCKeditor佈景主題

         若要更換FCKeditor的佈景主題(Skin)，則修改WebForm Code中的SkinPath屬性即可。

         ※FCKeditor內建的Skin有三種 Default / office2003 /silver

13     protected void Page_Load(object sender, EventArgs e)

14     {

15         FCKeditor1.SkinPath = "skins/silver/";

16 

17     }

最後這裡有一篇關於FCKeditot的技術資料，提供給各位參考。

http://wiki.fckeditor.net/Developer's_Guide/Integration/ASP.Net