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"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></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