Cấu hình Ckeditor Toolbar Configuration Option bằng Replace hoặc Config

Để cấu hình cài đặt hiển thị hoặc ẩn đi các Toolbar mặc định của Ckeditor nhiều bạn lên mạng mò sẽ không biết cách sử dụng khi gán thông qua lệnh CKEDITOR.replace() / toolbar / toolbarGroups hoặc config.toolbar hoặc config.toolbarGroup. CKEDITOR cỏ thể dùng được cho web asp.net code C# mô hình MVC hoặc không, code website PHP, web Java

Demo ví dụ:

Mã:

CKEDITOR.replace("ckDesciption", {
    toolbar: [
    { name: 'document', items: ['Source', '-', 'NewPage', 'Preview', '-', 'Templates'] },
    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
    { name: 'basicstyles', items: ['Bold', 'Italic'] }
        ]});

1. Cấu hình thông qua config.toolbar hoặc config.toolbarGroups

1.1: Cấu hình thông qua CKEDITOR.replace / toolbar

Mã:

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' ] }
    ]
});

1.2: Cấu hình thông qua CKEDITOR.replace / toolbarGroups

Mã:

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' }
    ]
});

2. Cấu hình thông qua config.toolbar hoặc config.toolbarGroups

2.1: Cấu hình thông config.toolbar

Mã:

// Toolbar cấu hình theo từng nhóm và tên option
config.toolbar = [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    { 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' ] },
    { name: 'others', items: [ '-' ] },
    { name: 'about', items: [ 'About' ] }
];

2.1: Cấu hình thông config.toolbarGroups từng nhóm

Mã:

config.toolbarGroups = [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'forms' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'links' },
    { name: 'insert' },
    '/',
    { name: 'styles' },
    { name: 'colors' },
    { name: 'tools' },
    { name: 'others' },
    { name: 'about' }
];

Mã:

config.toolbarGroups = [
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'links' },
    { name: 'insert' },
    { name: 'forms' },
    { name: 'tools' },
    { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'others' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'styles' },
    { name: 'colors' },
    { name: 'about' }
];