jquery - 使用 jQuery 访问 CKEditor iframe 的样式标签

Question

这适用于 Firefox 和 Chrome，但不适用于 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>

我希望它将 ckeditor 的背景变成红色，它在 FF/Chrome 中就是这样做的。在IE中，它不仅不这样做，还会抛出错误:

网页错误详情

用户代理:Mozilla/4.0(兼容；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 )时间戳:2011 年 7 月 25 日星期一 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

像这样的东西会更容易实现:

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

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

和 jQuery 的东西:

$('#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/或 http://jsfiddle.net/67dXN/1/ (键盘，实时更新)