Jquery Cleditor Get Textarea Value On Keyup

I'm using Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html. I want to get the value on keyup and insert the text into another div. cleditor comes with change()

Solution 1:

It appears that cleditor hides the textarea and replaces it with an iframe (see line 203 of cleditor source).

So to achieve what you want, you just need to access the resulting iframe contents:

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

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

Updated jsFiddle

UPDATE to address Tim's comment

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 2

User ima007 was able to find a better cross-browser solution: jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE

Solution 2:

Have you tried using of CLEditor '.doc' property?

doc - The document object currently being edited in the iframe. cleditor documentation

var inputDoc = $("#input").cleditor().doc;

$(inputDoc).keyup(function(){
    var v = $('#input').val();
   $('#x').html(v);
})