Jquery Cleditor Wysiwyg Text Editor: Keyup() Works In Webkit Browsers But Not Firefox Or 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

. Here's the questi

Solution 1:

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/

Code:

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

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

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

Edit: Based on your comments with the above SO question result's not working, I've amended the code below. This works in IE9 and IE9's "IE8" developer mode. 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);
});

});

Another Edit: 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);
});

Solution 2:

Since I answered the question that prompted you for this, I guess I'll answer this one too ;)

This works in Chrome and Firefox (I don't have access to IE):

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

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

Updated jsFiddle

UPDATE

This also works in Chrome and Firefox. Maybe IE too?

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

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

jsFiddle