Change CKEditor toolbar dynamically

Question

How do you change the CKEditor toolbar dynamically (without using a pre-defined toolbar)?

The CKEditor Developer\'s Guide only tells you how to set the toolbar durin

Answer 1

If you want a simple way to swap toolbars in different areas, all you need to do is add the toolbars to the config, then select the one you want when you instantiate the editor.

In config.js:

CKEDITOR.editorConfig = function(config)
{
// default toolbar
config.toolbar = [
    { name: 'source',       items: [ 'ShowBlocks', 'Source' ] },
    { name: 'clipboard',    items: [ 'Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'  ] },
    { name: 'editing',      items: [ 'Find', 'Replace', 'SelectAll', 'Scayt' ] },

    { name: 'p2',           items: [ 'Blockquote', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
    { name: 'links',        items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'paragraph',    items: [ 'NumberedList', 'BulletedList' ] },
    { name: 'insert',       items: [ 'CreatePlaceholder', 'CreateDiv', 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'Iframe' ] },

    //{ name: 'styles',         items: [ 'Styles', 'Format' ] },
    { name: 'basicstyles',  items: [ 'Bold', 'Italic', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'styles',       items: [ 'Format' ] },
    { name: 'morestyles',   items: [ 'Font', 'FontSize' ] },
    { name: 'colors',       items: [ 'BGColor', 'TextColor' ] }
];

// here is one custom toolbar
config.toolbar_mycustom1 = [
    { name: 'source',       items: [ 'ShowBlocks', 'Source' ] },
    { name: 'clipboard',    items: [ 'Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'  ] },
    { name: 'editing',      items: [ 'Find', 'Replace', 'SelectAll', 'Scayt' ] }
];

// here is another custom toolbar
config.toolbar_mycustom2 = [
    { name: 'styles',       items: [ 'Format' ] },
    { name: 'morestyles',   items: [ 'Font', 'FontSize' ] },
    { name: 'colors',       items: [ 'BGColor', 'TextColor' ] }
];

// ...other config vars here

In your page where you instantiate a editor instance do so this way: