[ASP.NET] CKEditor.NET 3.5.3

2011-06-15

6845
0
ASP.NET

摘要:[ASP.NET] CKEditor.NET 3.5.3

使用 FCKeditor 來編輯線上文件是很普遍且好用的，而且只要載入了函示庫便可已利用他所提供的功能，讓使用者輕鬆的編輯資料，並且將編輯的成果以 HTML 方式儲存、呈現。

官方網站：http://docs.cksource.com/CKEditor.NET。Bring rich editor features to your products and websites, providing your users with powerful tools to make creating Web content easier than ever and accessible to anyone.
下載：點
其他版本下載點

------------------------------------------------------------------

這篇將以簡單的例子說明如何用 CKEditor.NET 3.5.3 來完成線上編輯的功能

下載 CKEditor.NET 3.5.3 函示庫
解壓縮 zip
將 CKEditor 加入工具列
頁面(aspx) 加入 CKEditor 元件
複製 fckeditor 資料夾到專案目錄下
檢查參考
測試執行
撰寫測試程式

===================================================

◎◎ 下載 CKEditor.NET 3.5.3 函示庫dd ◎

到下載點「http://download.cksource.com/CKEditor/CKEditor.NET/CKEditor.NET%203.5.3/ckeditor_aspnet_3.5.3.zip」把檔案抓回來吧，大小為1138KB。

◎◎ 解壓縮 zip ◎

不管用什麼壓縮軟體，可以將剛剛的「ckeditor_aspnet_3.5.3.zip」解壓縮就是好壓，我是用 7-ZIP解的。解開後如下圖的資料夾內容

◎◎ 將 CKEditor 加入工具列 ◎

開啟 Visual Studio 開發環境
將剛剛解壓縮目錄下的 ~\ckeditor_aspnet_3.5.3\bin\Release\CKEditor.NET.dll 複製到你存放函示庫的資料夾（不要在 temp 目錄解壓縮就直接做這個程序。因為這樣會使元件指向 temp 目錄，萬一被你刪除了，元件就失效了）
點選左邊工具列，然後拉到最下面「一般」群組，然後在這個區塊點滑鼠右鍵（這樣做是要將 Fckeditor 放到這個分類，如果你想選其他，就在其他分類點滑鼠右鍵囉！），接著選「選擇項目」
點選瀏覽按鈕，然後切換目錄到你剛剛存放「CKEditor.NET.dll」的路徑

「一般」的工具箱裡就會多出了「CKEditorControl」元件

◎◎ 頁面(aspx) 加入 CKEditor 元件 ◎

做到這個步驟，你可以直接在瀏覽器檢視結果，你會發現怎麼好像只是個 MultiLine 的 Textbox，這表示動作還沒做完，繼續下面的動作吧～

◎◎ 複製 fckeditor 資料夾到專案目錄下 ◎

接著將剛剛解壓縮目錄下的「~\ckeditor_aspnet_3.5.3\_Samples\ckeditor」目錄複製到你的專案路徑去
將該目錄加入專案裡

◎◎ 檢查參考 ◎

正常的情況，當你拉入了 CKEditor 元件，他就會在你的 ~\bin 目錄下放了「FredCK.FCKeditorV2.dll」，在參考裡幫你放了「CKEditor.NET」
也檢查看看你的專案到這個步驟是不是也都正常

◎◎ 測試執行 ◎

在上兩張圖，我們檢查了 CKEditor 的執行狀態（是失敗的），現在請再檢查看看執行是否OK！

啥？還是不行該怎麼辦？......XD

如果你跟我一樣，因為編輯頁面的動作是只有在後台會執行到，所以將 ckeditor 放到了 admin 的目錄下，也因為這樣導致 .net 找不到你的編輯器，請在頁面(aspx)上的 CKEditorControl 宣告增加「BasePath="~\admin\ckeditor"」

如果想稍微變一下編輯器的底色，可以增加「UIColor="#BFEE62"」，就變成綠綠的很舒服的顏色。

****************************************************

◎◎ 撰寫測試程式 ◎

程式執行

所需元件：「CKEditor」、「Button」、「Label」與「SqlDataSource」
目的：在 CKEditor 編輯一段文字後，將結果呈現在 Label 上及寫入到資料庫

--------

在 Visual Studio 拉入所需元件
在資料庫「Northwind」增加一個資料表 T1
建立 SqlDataSource 連線（詳細步驟這邊就不提了）
撰寫 Button1 執行的動作
C# 版
Label1.Text = CKEditorControl1.Text; // 將 CKeditor 結果輸出到 Label
//將 CKeditor 結果輸出到資料庫
SqlDataSource1.InsertParameters[0].DefaultValue = CKEditorControl1.Text;
SqlDataSource1.Insert();

VB版
Label1.Text = Me.CKEditorControl1.Text
SqlDataSource1.InsertParameters.Item(0).DefaultValue = CKEditorControl1.Text
SqlDataSource1.Insert()

## 執行結果 ##

而在資料庫裡就會記錄下「 捷運上竟然有年輕女子霸佔博愛座，不但不讓位給老人，還翹著二郎腿囂張飆罵髒話，狂罵老人「死老頭」、「神經病」、「沒大沒小」，叫囂過程全被同車乘客拍下PO網，引來網友一片撻伐，大罵女子「丟臉！惡劣到極點！」 <img alt="" src="http://img208.poco.cn/mypoco/myphoto/20101020/15/53532005201010201521292853105300228_000.gif" style="width: 154px; height: 84px" /> 圖片來源：<a href="http://liweilun87.pixnet.net/blog/post/32299847">http://liweilun87.pixnet.net/blog/post/32299847</a> 」

講完了～吃午飯囉～～

咦？那跟舊版的 FCKeditor 有啥不同？～之前對於編輯器的取值跟設定值都是用「.value」，眼尖的你有沒發現，我上面的方法是用 .Text 囉～

後記：如果執行 CKEditor 時有發生CKEditorControl.cs 檔案的「不存在類型或命名空間名稱“ControlDesigner”」，只要多 Using System.Design; 就可以了～

回首頁