jQuery Cleditor wysiwyg 文本编辑器：keyup() 适用于 webkit 浏览器，但不适用于 Firefox 或 IE

Question

我正在尝试跟进之前的 Stackoverflow 问题，该问题涉及如何在外部 HTML 元素（例如

）中显示 Cleditor 文本框中的内容。这是问题和小提琴 解决了我在 webkit 浏览器中的问题，但不能解决 Firefox 或 IE 中的问题：

这是来自小提琴：

<textarea id="input" name="input"></textarea>
<p id="x"></p>  

<script>
  $("#input").cleditor();

  $(".cleditorMain iframe").contents().find('body').bind('keyup',function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
  });
</script>

我已经阅读了我需要的 从 jquery 获取 iframe 的内容使用“window.top ....访问主页并以这种方式传递它，因为并非所有浏览器都支持.contents（）”，但我不确定如何使用window.top来实现此目的，并希望有人也许能够摆脱一些浅谈这个话题。

Answer 1

cleditor 文档指出它确实有一个“change”事件，它声称可以与“keyup”事件一起使用，但不幸的是，在我的测试中，它在 Firefox 7 中没有按预期工作（需要单击文本编辑器） 。

Jsfiddle： http://jsfiddle.net/qm4G6/27/

代码：

var cledit = $("#input").cleditor()[0];

cledit.change(function(){
    var v = this.$area.context.value;
    $('#x').html(v);
});

还有另一个StackOverflow问题询问了同样的事情，其中​​用户 Ling 建议修改插件以添加您自己的功能：
从 jquery CLEditor 获取内容

编辑：
根据您对上述 SO 问题结果的评论不起作用，我修改了下面的代码。
这适用于 IE9 和 IE9 的“IE8”开发者模式。 http://jsfiddle.net/qm4G6/80/

$(document).ready(function(){

 var cledit = $("#inputcledit").cleditor()[0];
 $(cledit.$frame[0]).attr("id","cleditCool");

var cleditFrame;
if(!document.frames)
{
   cleditFrame = $("#cleditCool")[0].contentWindow.document;
}
else
{
    cleditFrame = document.frames["cleditCool"].document;
}

$( cleditFrame ).bind('keyup', function(){
    var v = $(this).text(); 
    $('#x').html(v);
});

});

另一个编辑：要获取 HTML，您必须在 iframe 中找到正文，例如 $(this).find("body").html()。请参阅下面的代码。
JSFiddle： http://jsfiddle.net/qm4G6/84/

var cledit = $("#inputcledit").cleditor()[0];
$(cledit.$frame[0]).attr("id","cleditCool");

var cleditFrame;
if(!document.frames)
{
   cleditFrame = $("#cleditCool")[0].contentWindow.document;
}
else
{
    cleditFrame = document.frames["cleditCool"].document;
}

$( cleditFrame ).bind('keyup', function(){
        var v = $(this).find("body").html();
        $('#x').html(v);
});

$("div.cleditorToolbar, .cleditorPopup div").bind("click",function(){
      var v = $( cleditFrame ).find("body").html();
      $('#x').html(v);
});

Answer 2

既然我回答了提示你这个问题的问题，我想我也会回答这个问题；）

适用于 Chrome 和 Firefox（我无法访问 IE）：

$("#input").cleditor();

$( $(".cleditorMain iframe")[0].contentWindow.document ).bind('keyup', function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
});

这 net/qm4G6/26/" rel="nofollow">更新了 jsFiddle

更新

这也适用于 Chrome 和 Firefox。也许IE也可以？

$("#input").cleditor();

$( $(".cleditorMain iframe")[0].contentDocument ).bind('keyup', function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
});

jsFiddle