javascript - jQuery Cleditor 所见即所得文本编辑器 : keyup() works in webkit browsers but not Firefox or IE

Question

我正在尝试跟进之前关于如何在外部 HTML 元素(例如 <p>)中显示来自 Cleditor 文本框的内容的 Stackoverflow 问题。 .这是 the question和 the fiddle它解决了我在 webkit 浏览器中的问题，但没有解决 Firefox 或 IE:

这是来自 fiddle 的代码:

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

我读过 Get content of iframe from jquery我需要使用“window.top ....访问主页并以这种方式传递它，因为所有浏览器都不支持.contents()”但我不确定如何为此目的使用window.top并希望有人能够阐明这个话题。

Answer 1

cleditor 文档指出它确实有一个“更改”事件，它声称可以与“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 question 也问了同样的事情，其中​​用户 Ling 建议修改插件以添加自己的功能: Get content from jquery CLEditor

编辑:根据您对上述 SO 问题 result's not working 的评论，我修改了下面的代码。这适用于 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);
});