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

【问题标题】：Access CKEditor iframe's style tags with jQuery使用 jQuery 访问 CKEditor iframe 的样式标签
【发布时间】：2011-07-26 06:15:57
【问题描述】：

这适用于 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

【问题讨论】：

有趣，这在 IE 中确实有效：$(oldstyle).after($(""));
由于我建议的方法对您不起作用，我认为问题可能是用于查找oldstyle的操作。我认为其中一些 jQuery 调用也可以避免。你能粘贴包含你的 textarea#myed 的完整 html，特别是它的父母吗？所以要尝试找到更好的方法来选择它。
嘿大卫，在twiddle 点击回调中执行$('#myed').parent('body').css('background','red'); 怎么样？
@stecb - 好主意，但这都是实时 CSS 编辑器的一部分，它在 textarea 和 keyup 中获取（css）文本，将
或..$("<style type='text/css'> body{ background-color : red; } </style>").appendTo("head")

标签： jquery css iframe internet-explorer-8 ckeditor

【解决方案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/（keyup，实时更新）

【讨论】：

【解决方案2】：

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

http://api.jquery.com/append

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

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

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

【讨论】：

jsfiddle.net/DLfXB/3 在这里你可以明白我的意思。如果这在您的代码中不起作用，我认为问题出在那个复杂的选择器上。