Question

This works in Firefox and Chrome, but not in IE8.

<div class="container">

<form action="">
  <textarea id="myed" rows="" cols=""></textarea>
</form>

<button id="twiddle">Twiddle CSS</button>


<script type="text/javascript">
$(document).ready(function() {
   CKEDITOR.replace('myed', {});
   $("#twiddle").click(function () {
       var oldstyle = $($($('#myed').parent().find('iframe')[0]).contents()[0]).find('style');
       $(oldstyle).append("body { background-color: red; }");
    });
 });
</script>

I expect it to turn the ckeditor’s background red, which it does in FF/Chrome. In IE, not only does it not do it, it throws an error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Mon, 25 Jul 2011 20:52:27 UTC

Message: Unexpected call to method or property access.
Line: 16
Char: 55208
Code: 0
URI: http://10.0.2.2:3000/javascripts/jquery.js?1297871725

jQuery: 1.5 CKEditor: 3.6.1

Answer 1

Something like this would be easier to implement:

<textarea id="myed">body { background : red; }</textarea> <!-- here you will set your ckeditor -->

<button id="twiddle">update css</button>

and jQuery stuff:

$('#twiddle').click(function(){

    $('#customStyle').remove(); //if I already have set customStyle, remove it

    $("<style id='customStyle' type='text/css'>"+$('#myed').val()+"</style>").appendTo('head'); //add the new style to the current document head

});

http://jsfiddle.net/steweb/67dXN/ or http://jsfiddle.net/67dXN/1/ (keyup, live updating)