CKEditor工具栏自定义

虽然CKEditor是一个功能很强大富文本编辑器，但是并不是所有的功能都是需要用到的，因此，能够自动以工具栏是非常有必要的。

有以下几种方法可以对工具栏的配置进行自定义：

• 使用工具栏配置器——推荐和易于使用的解决方案
• 工具栏组配置器——需要手动配置工具栏（仅适用于高级用户）
• 逐项配置——需要手动配置工具栏（仅适用于高级用户）

工具栏配置器

CKEditor4.5中引入了工具栏配置器，并可以在CKEditor的下载包中找到（解压文件目录：/ckeditor/samples/index.html），打开页面如下

点击TOOLBAR CONFIGURATOR 按钮，进入配置页面

（Basic）基本模式页面 (Advanced)高级模式页面

你可以选择不同的模式进行操作。基本模式下，我们只需要在工具对应的复选框勾选或不勾选来选择需要的工具菜单；高级模式下，我们只需要删除或添加对应的参数也可以选择需要的工具菜单。

在基本模式下，当你配置好了需要的工具栏后，单击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';
    
    //设置高度
    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' ] }
    ];
    
};