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

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

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

这是小提琴的代码：

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

我已经阅读了从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中找到像$(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); }); 

更新了jsFiddle

UPDATE

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

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

的jsfiddle