CKEditor NET 3.5.3 教學

CKEditor 編輯文件用於徒MS SQL 內,以html方式編輯及儲存

官方網站：http://docs.cksource.com/CKEditor.NET
CKEditor下載：點

Asp.net 3.5 下安裝CKEditor 步驟動作：

1. 下載工具
2. 解壓縮
3. CKEditor 加入工具列
4. 頁面(aspx) 加入 CKEditor 元件
5. 複製 fckeditor 資料夾到專案目錄下
6. 檢查參考
7. 測試執行
8. 撰寫程式上線

【步驟開始】
一、下載工具
下載：點「http://download.cksource.com/CKEditor/CKEditor.NET/CKEditor.NET%203.5.3/ckeditor_aspnet_3.5.3.zip」

二、解壓縮

三、CKEditor 加入工具列

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

4.點選瀏覽按鈕，然後切換目錄到你剛剛存放「CKEditor.NET.dll」的路徑
請選在：.NET Framework元件的選項下面

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

四、頁面(aspx) 加入 CKEditor 元件

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

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

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

   

   PS.不一定用加至專案，可以直接將ckeditor資料夾拉到admin底下也可以

   
   

六、 檢查參考

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

七、測試執行

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

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

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

八、撰寫測試程式(執行程式)

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

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

按下Button  就會把編輯器的用文字方式存在MS SQL 裡面 Lable.txt 直接抓 編輯器的.txt進來直接呈現

心得：

CKEditor 3.5.3 這版很簡單，幾個步驟就搞定了，像之前我看過2開頭的版本動作很複雜，如果有心要用的話，可以用3.5.3 版的，容易就置入，有個插曲，就是我剛用好之後，MS SQL 卻跑出來字串錯誤訊息，我也很見鬼，後來電腦重開，就搞定了，也不知道為什麼，很神奇，另外申明本篇文章，2/3參考別人的文章過來，有任何貌犯，請跟我講，我會盡快處理，還有任何網友有問題，請留言給我，我會盡快回你。

ckeditor的內容讀、寫與插入
ckeditor 目前是我用過比較合身的 wysiwyg web editor，而且他也提供非常多複雜的方法，所以我持續有新的發現。
要操作 ckeditor 的內容，使用  instance 的方法，若textarea 的id="desc"。
讀取內容
var ct= CKEDITOR.instances.desc.getData();
寫入內容
CKEDITOR.instances.desc.setData( "Insert value" ) ;
這裡寫入的內容會注入到原始碼，所有帶有HTML的tags可以生效
取得焦點
CKEDITOR.instances.desc.focus();
插入內容
CKEDITOR.instances.desc.insertHtml( "insert value" ) ;
執行命令
var ct= CKEDITOR.instances.desc;
ct..execCommand('bold');
ct.execCommand('forecolor',false,'#00ff00');
ct.execCommand('JustifyCenter', false, null);
ct.execCommand('fontsize', false, 15);



參考資料
CKEditor 官網 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html
CKEditor讀取、設定內容 http://www.dotblogs.com.tw/bowwowxx/archive/2010/04/01/14349.aspx 這裡有js的striptags 方法
CKEditor API-Ticket http://dev.ckeditor.com/attachment/ticket/4254/api.html
CKEditor 的插件開發 http://bbish.net/01toturial/44/ckeditor-

按鈕的對照表 :
如果要移除表上按鈕的話可以使用config.removePlugins ='save'   (請全部打小寫才能使用，大小寫有分，詳細上網再查詢大小寫部份)

檔案ckeditor\config.js

Source：原始碼

save：儲存
NewPage：開新檔案
Preview：預覽
Templates：樣版

Cut：剪下
Copy：複製
Paste：貼上
PasteText：貼為文字格式
PasteFromWord：自 word 貼上
Print：列印
SpellChecker：拼字檢查
Scayt：即時拼寫檢查

Undo：復原(上一步)
Redo：重複(下一步)
Find：尋找
Replace：取代
SelectAll：全選
RemoveFormat：清除格式

Form：表單
Checkbox：核取方塊
Radio：選項按鈕
TextField：文字方塊
Textarea：文字區域
Select：選單
Button：按鈕
ImageButton：影像按鈕
HiddenField：隱藏欄位

Bold：粗體
Italic：斜體
Underline：底線
Strike：刪除線
Subscript：下標
Superscript：上標

NumberedList：編號清單
BulletedList：項目清單
Outdent：減少縮排
Indent：增加縮排
Blockquote：引用文字

JustifyLeft：靠左對齊
JustifyCenter：置中
JustifyRight：靠右對齊
JustifyBlock：左右對齊

Link：插入/編輯超連結
Unlink：移除超連結
Anchor：插入/編輯錨點

Image：插入影像
Flash：插入Flash
Table：插入表格
HorizontalRule：插入水平線
Smiley：插入表情
SpecialChar：插入特殊符號
PageBreak：插入分頁符號

Styles：樣式
Format：格式
Font：字體
FontSize：大小

TextColor：文字顏色
BGColor：背景顏色

Maximize：最大化
ShowBlocks：顯示區塊
About：關於CKEditor