Changing the background color of a ckeditor instance

ckeditor is great once you get past the steep learning curve. Lately I have been looking for a way to change the background color of the editor / where you enter in the content on the fly. If you google "ckeditor change background color" you will find that most results suggest changing the background color using a theme stylesheet witch works for most cases. For my use case this wasn't going to fly. So after exploring my ckeditor instance in firebug I stumbled across this.

Create your Instance

<textarea cols="100" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>

<script type="text/javascript">
    // Replace the <textarea id="editor1"> with an CKEditor instance.
    var editor = CKEDITOR.replace( 'editor1' );
    editor.on( 'instanceReady', function( ev ){
        //set the background properties
                this.document.$.childNodes[1].childNodes[1].style.backgroundColor = 'Blue';
               
                editor.focus();
        });
</script>

 

this.document.$.childNodes[1].childNodes[1] trversese down to the instances body tag were you can apply your styles, in my case background color