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

Question

我正在尝试跟进之前的Stackoverflow问题,该问题涉及如何在外部HTML元素(如a)中显示Cleditor文本框中的内容<p>.这是在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文档声明它确实有一个"更改"事件,它声称与'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中找到body $(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);
});