雖然CKEditor是一個功能很強大富文本編輯器,但是并不是所有的功能都是需要用到的,因此析苫,能夠自動以工具欄是非常有必要的。
有以下幾種方法可以對工具欄的配置進行自定義:
- 使用工具欄配置器——推薦和易于使用的解決方案
- 工具欄組配置器——需要手動配置工具欄(僅適用于高級用戶)
- 逐項配置——需要手動配置工具欄(僅適用于高級用戶)
工具欄配置器
CKEditor4.5中引入了工具欄配置器档玻,并可以在CKEditor的下載包中找到(解壓文件目錄:/ckeditor/samples/index.html),打開頁面如下
點擊TOOLBAR CONFIGURATOR 按鈕茫藏,進入配置頁面
你可以選擇不同的模式進行操作误趴。基本模式下务傲,我們只需要在工具對應的復選框勾選或不勾選來選擇需要的工具菜單凉当;高級模式下枣申,我們只需要刪除或添加對應的參數(shù)也可以選擇需要的工具菜單。
在基本模式下看杭,當你配置好了需要的工具欄后忠藤,單擊Get tootbar config按鈕以顯示生成的工具欄配置代碼,將你的新工具欄代碼添加到你的配置文件ckeditor/config.js中楼雹,注意不要覆蓋了你的其他某些配置模孩。
高級模式下,直接顯示的就是你的新工具代碼贮缅,將其添加到你的配置文件中即可榨咐。
ckeditor/config.js
/*CKEditor編輯器配置*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
//設(shè)置高度
config.height = 350;
//工具欄
config.toolbar = [
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview','TextColor', '-', 'Templates' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
];
};