CKEDITOR的工具栏添加

自从CKEditor 4 之后,有两种方法去设置工具栏按钮

config.toolbar

你能够直接定义按钮以指定位置显示在指定组中,这是更为准确的设置方法,但是不够灵活。你将不得不手动的设置config.toolbar属性。

用自定义的工具栏设置添加一个CKEditor实例,插入这段Javascript命令到代码中:

CKEDITOR.replace( 'textarea_id', {
    toolbar: [
        { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },
         // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
        [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],          
         // Defines toolbar group without name.
        '/',
        // Line break - next group will be placed in new line.
        { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
    ]
});

config.toolbarGroups

你能够指定按钮组(例如basicstyles,clipboardforms)显示在指定位置上。在每个按钮的定义中通过toolbar属性注册后,是与toolbar groups相关的。这样设置的优点是当你增删带有自己按钮的插件时,你没有必要更改工具栏设置。

用自定义的工具栏组设置添加一个CKEditor实例,插入这段Javascript命令到代码中:

CKEDITOR.replace( 'textarea_id', {
    toolbarGroups: [
        { name: 'document',    groups: [ 'mode', 'document' ] },            // Displays document group with its two subgroups.
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },           // Group's name will be used to create voice label.
        '/',                                                                // Line break - next group will be placed in new line.
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'links' }
    ]

    // NOTE: Remember to leave 'toolbar' property with the default value (null).
});

你可能感兴趣的:(CKEDITOR的工具栏添加)