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

问题描述：

这适用于Firefox和Chrome，但不适用于IE8。使用jQuery访问CKEditor iframe的样式标签

<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;三叉戟/ 4.0; SLCC2。 NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729;媒体中心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

有趣的是，这并不在IE工作： $（oldstyle）.after（$（““））; –

由于我建议的方法不适合你，我认为这个问题可能是用来找到旧式的操作。我认为也可以避免一些jQuery调用。你能粘贴包含你的textarea＃myed的完整html，特别是它的父母吗？所以试图找到一个更好的方式来选择它。 –

嘿大卫，怎么样做$（'＃myed'）。parent（'body'）.css（'background'，'red'）;''twiddle'里面点击回调？ – stecb

答

像这样的事情会更容易实现：

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

答

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

http://api.jquery.com/append

我想你可能会寻找的是.html方法。

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

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

不，同样的问题。 –

http://jsfiddle.net/DLfXB/3/在这里你可以看到我的意思。如果这在你的代码中不起作用，我认为问题在于那个复杂的选择器。 –

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

相关推荐