How to change background colour of Ckeditor instance on the fly from external colour picker

Question

I'm using some external styles on containers in our CMS, one of which is the css background colour, and then we use a CKEditor (4.x) instance to manage the content within the container. One issue is that when you want the container to have a black (#000) background but the editor has a standard white (#FFF) background and you want to use white text, you obviously wouldn't be able to see the text in the editor without MacGyvering some fake backround while you work, or working in a different colour text and then changing to white.... any way you spin it, it's a PITA and certainly not user friendly.

So what we're doing is using the change event from the colour picker in the external form field, to fire a function that changes the editor instance background on the fly. I got the base for this from a previous question (changing the background color for ckEditor):

set_background: function(hex) {
    if (typeof CKEDITOR !== "object") { return; }
    var editor = CKEDITOR.instances['body'];
    if (editor) {
        editor.on('instanceReady', function(e) {
            // First time
            e.editor.document.getBody().setStyle('background-color', hex);
            // in case the user switches to source and back
            e.editor.on('contentDom', function() {
                e.editor.document.getBody().setStyle('background-color', hex);
            });
        });
    }
}

The method is fired once on form load which works great, whatever value is in the colour picker at load is set properly and the editor inherits that background colour. However when I change the colour of the picker it doesn't update the instance. If I remove the instanceReady check however, it'll do the opposite, the load fire won't work but any changes to the picker work perfectly.

I'm guessing the ck instance isn't ready during the first call of my second scenario, meaning I probably must have it there, so my question is, how to I get the follow up calls to function properly like the first call to it does?

Thanks for any insights!

Answer 1

I managed to find a working solution that stores the instance once it's ready and uses that for any future calls...

ck_instance: null,

set_background: function(hex) {
    if (this.ck_instance === null) {
        if (typeof CKEDITOR !== "object") { return; }
        this.ck_instance = CKEDITOR.instances['body'];
        if (typeof this.ck_instance !== "object") { return; }
        this.ck_instance.on('instanceReady', function(e) {
            // First time
            e.editor.document.getBody().setStyle('background-color', hex);
            // in case the user switches to source and back
            e.editor.on('contentDom', function() {
                e.editor.document.getBody().setStyle('background-color', hex);
            });
        });
        return;             
    }
    // First time
    this.ck_instance.document.getBody().setStyle('background-color', hex);
    // in case the user switches to source and back
    this.ck_instance.on('contentDom', function() {
        this.ck_instance.document.getBody().setStyle('background-color', hex);
    });
}

Both required firings are working now, once on form load to set the saved background in the new editor, and again by way of the colour pickers change callback.