访问CKEditor iframe'；带jQuery的s样式标记

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

---

jQuery:1.5 CKEditor:3.6.1

难道

append

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

我想您可能正在寻找

.html

方法

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

---

通过这种方式，您将向已存在的html添加新的html。

类似的内容更容易实现：

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

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

body{背景：红色；}
更新css

还有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

});

$（“#旋转”）。单击（函数（）{
$（'#customStyle'）.remove（）；//如果我已经设置了customStyle，请将其删除
$（“”+$（“”#myed'）.val（）+“”）.appendTo（'head'）；//将新样式添加到当前文档头
});

---

或者（keyup，实时更新）

在这里你可以看到我的意思。如果这在代码中不起作用，我认为问题在于复杂的选择器。有趣的是，这在IE:$（旧样式）中确实起作用；由于我建议的方法不适用于您，我认为问题可能是用于查找旧样式的操作。我认为一些jQuery调用也可以避免。你能粘贴包含你的textarea#myed，特别是它的父母的完整html吗？所以，试着找到一个更好的方法来选择它。嘿，大卫，做

$（'myed'）怎么样？parent（'body'）.css（'background'，'red'）

在

twidle

click callback？@stecb-好主意，但这都是一个实时CSS编辑器的一部分，它在文本区域中获取（CSS）文本，并在键盘上设置标记的内容，以便对ckeditor内容进行“实时”更新。或者<代码>$（“正文{背景色：红色；}”）。附录（“标题”）

$('#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

});