5

I'm trying to dynamically add/remove buttons from a ckeditor instance.

I have found the following thread on stackoverflow: Change CKEditor toolbar dynamically

The solution with firing the uiSpace event works fine, except that there is an issue with combo boxes in the toolbar. If I try to change the readonly state of the editor after I updated the toolbar using that approach, I get the following exception:

Uncaught TypeError: Cannot read property 'setState' of null ckeditor.js:752 CKEDITOR.ui.richCombo.CKEDITOR.tools.createClass.proto.setState ckeditor.js:746

Also the combo boxes are not disabled.

I'm adding the following reload function:

CKEDITOR.editor.prototype.reloadToolbar = function() {
        if (!this._.events.themeSpace) {
          CKEDITOR.plugins.registered.colorbutton.init(this);
          CKEDITOR.plugins.registered.toolbar.init(this);
        }

        //According to CKEditor documentation
        var obj = this.fire( 'uiSpace', { space: 'top', html: '' } ).html;
        // Replace the toolbar HTML 
        var tbEleId = this.id +"_" + this.config.toolbarLocation;
        var tbEle = document.getElementById(tbEleId);
        tbEle.innerHTML = obj;
}

Then I'm executing the following code (shortened example):

CKEDITOR.config.toolbarGroups = [
    { name: 'clipboard', groups: [ 'clipboard', 'undo', 'find' ]}, 
    { name: 'colors' }
];
CKEDITOR.instances.editor.reloadToolbar();

The exception raises if I now try to make put the editor in readonly mode via

CKEDITOR.instances.editor.setReadOnly(true);

So the question is, is it possible to dynamically update the toolbar using the above solution? If so, what is missing to also make changing the readonly state work? Or is the only way this works to destroy and reload the editor?

Community
  • 1
  • 1
Dirk Fauth
  • 4,128
  • 2
  • 13
  • 23

0 Answers0