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 的話，可以用以下的設定，

執行結果

 

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 設定，如果要還是特別指定的話，就是用以下的方式，

執行結果

 

如果想要自己客製設定 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']}

];

而使用的方式如下：

執行結果

 

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

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

 

以上