changing the background color for ckEditor

Question

I need to change the background color dynamically on load with my ckEditor the page that it is on is a dynamically loading page where they user has a specific bg color. I can not load a css it has to be just the editor body background color

so i tried

window.onload=function(){
    CKEDITOR.instances.editor_data.addCss( 'body { background-color: #efefef; }' );
}

i do not get an error, but also do not get any changes

i also tried

CKEDITOR.instances.editor_data.addCss( '#cke_editor_data { background-color: #efefef; }' );

Answer 1

If you're calling that during window.load then it's too late, addCss defines some css to load when the editor is created, but it doesn't modify the running instance.

So you can so this (using only addCSS):

CKEDITOR.on('instanceCreated', function(e) {
    e.editor.addCss( 'body { background-color: red; }' );
});

Or this (a more generic way to work with the edited document)

CKEDITOR.on('instanceReady', function(e) {
    // First time
    e.editor.document.getBody().setStyle('background-color', 'blue');
    // in case the user switches to source and back
    e.editor.on('contentDom', function() {
        e.editor.document.getBody().setStyle('background-color', 'blue');
    });
});