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/（关键字，实时更新）

Answer 2

是不是append方法用于将DOM节点作为指定元素的最后一个子节点插入？

http://api.jquery.com/append

我认为您可能正在寻找的是.html方法。

$(oldstyle).html( $(oldstyle).html() + " body { background-color: red; }" );

这样您就可以将新的html添加到已存在的html中。

使用jQuery访问CKEditor iframe的样式标记

2 个答案: