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

You can create toolbar dynamically as you like. I found that the best approach is to listen to CKE events regarding instance creation.

CKEDITOR.on('instanceCreated', function(event) {
    var editor = event.editor;
    editor.config.toolbar = [
        { name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic','Subscript', 'Superscript' ] },
    ]; // could be from synchronous!!! XHR as well 
});

CKEDITOR.on('instanceReady', function(event) {
    var editor = event.editor;
    editor.config.toolbar = [
        { name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic','Subscript', 'Superscript' ] },
    ];
});

Answer 2

var editor = CKEDITOR.instances['text_id'];
if (editor) { editor.destroy(true); }

CKEDITOR.config.toolbar_Basic = [['Bold','Italic','Underline',
'-','JustifyLeft','JustifyCenter','JustifyRight','-','Undo','Redo']];
CKEDITOR.config.toolbar = 'Basic';
CKEDITOR.config.width=400;
CKEDITOR.config.height=300;
CKEDITOR.replace('text_id', CKEDITOR.config);

Answer 3

Or:

   $(document).ready(function() {
      CKEDITOR.config.customConfig = 'configSimple';
   }); 

   //the configSimple.js file is the same folder with config.js

Answer 4

Following mb21's suggestion I managed to load a new toolbar by reinitialising the whole editor:

CKEDITOR.instances.editor.destroy();
CKEDITOR.replace('editor', configWithNewToolbar);