jQuery Cleditor wysiwyg文本编辑器：keyup（）在webkit浏览器中工作，但不是Firefox或IE [英] jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE

问题描述

我正在尝试跟进一个以前的Stackoverflow问题，关于如何从外部HTML元素（例如< p> ）中的Cleditor文本框中显示内容。以下是问题和小提琴解决了我的问题在webkit浏览器，但不是Firefox或IE：

I'm trying to follow up on a previous Stackoverflow question about how to display content from a Cleditor textbox in an external HTML element such as a <p>. Here's the question and the fiddle which solves my problem in webkit browsers but not Firefox or IE:

这里是来自小提琴的代码：

Here's the code from the 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>

我已阅读从jquery获取iframe的内容，我需要使用window.top ....访问主页并传递它，因为.contents（ ）不支持所有的浏览器但我不知道如何使用window.top为此目的，我希望有人可能能够阐明这个话题。

I've read Get content of iframe from jquery that I need to use "window.top.... to access the main page and pass it that way because .contents() is not supported by all browsers" but i'm not sure how to use window.top for this purpose and am hoping someone might be able to shed some light on this topic.

推荐答案

这个cleditor文件说明它确实有一个变更事件，它声称与keyup事件一起工作，但是不幸的是在我的测试中，Firefox 7没有按预期的方式工作（需要点击文本编辑器）。

The cleditor documentation states that it does have a "change" event which it claims to work with the 'keyup' event, but unfortunately in my testing it didn't work as expected with Firefox 7 (requires clicking out of the text-editor).

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

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获取内容

There is also another StackOverflow question which asked about the same thing, in which user Ling suggests modifying the plugin to add your own function: Get content from 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中找到正文，如 $（本）.find（ 正文）。HTML（）。请参阅下面的代码。
JSFiddle： http://jsfiddle.net/qm4G6/84/

Another To get the HTML, you have to find body within the iframe like $(this).find("body").html(). See the code below. 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);
});

这篇关于jQuery Cleditor wysiwyg文本编辑器：keyup（）在webkit浏览器中工作，但不是Firefox或IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！