2013年11月18日 星期一

ASP.NET MVC 使用 CKEditor - Custom ToolBar

CKEditor 預設了兩種 ToolBar 的設定,這邊將會說明怎麼使用,以及如何客製化 ToolBar 的設定。

 


http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar

在 CKEditor 裡已經預設了兩種 ToolBar,分別是:Basic 以及 Full,

toolbar_Basic 所設定的 ToolBar 內容為:

toolbar_Basic=
[['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];

如果要使用 Basic 的 ToolBar 的話,可以用以下的設定,

image

image

執行結果

image

 

toolbar_Full 所設定的 ToolBar 內容為:

toolbar_Full=
[
    {name:'document',items:['Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates']},
    {name:'clipboard',items:['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo']},
    {name:'editing',items:['Find','Replace','-','SelectAll','-','SpellChecker','Scayt']},
    {name:'forms',items:['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField']},
    '/',
    {name:'basicstyles',items:['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']},
    {name:'paragraph',items:['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl']},
    {name:'links',items:['Link','Unlink','Anchor']},
    {name:'insert',items:['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe']},
    '/',
    {name:'styles',items:['Styles','Format','Font','FontSize']},
    {name:'colors',items:['TextColor','BGColor']},
    {name:'tools',items:['Maximize','ShowBlocks','-','About']}
];

toolbar_Full 也是預設的 ToolBar 設定,如果要還是特別指定的話,就是用以下的方式,

image

執行結果

image

 

如果想要自己客製設定 ToolBar 的內容,可以在 config.js 裡增加 ToolBar 的設定,例如以下是以 Full 的 ToolBar 設定內容做修改後的 ToolBar 設定內容,

ToolBar 的設定名稱為「toolbar_Custom」,而之後要使用這個 ToolBar 設定的話就是使用「Custom」,

config.toolbar_Custom = [
    {name:'document',items:['Source','-','Save','NewPage','DocProps','Preview']},
    {name:'clipboard',items:['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo']},
    {name:'editing',items:['Find','Replace','-','SelectAll','-','SpellChecker','Scayt']},
    '/',
    {name:'basicstyles',items:['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']},
    {name:'paragraph',items:['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl']},
    {name:'links',items:['Link','Unlink','Anchor']},
    '/',
    {name:'styles',items:['Styles','Format','Font','FontSize']},
    {name:'colors',items:['TextColor','BGColor']},
    {name:'tools',items:['Maximize','ShowBlocks','-','About']}
];

image

而使用的方式如下:

image

執行結果

image

 

當然也有其他的設定方法,不過這邊就不再敘述,各位 Google 一下就可以找到很多相關資料,如果想要增加新的 Tool 按鍵與功能的話,可以參考 twMVC - Jerry 的文章:

CKEditor 自訂ToolBar按鈕 - 我的Coding之路- 點部落

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。