jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE

Question

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>

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.

Artema

Answer 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);
});

Foresheet

Hi ima007-thanks for the suggestion, I've tried this fix but unfortunately, there seems to be a bug in line 100 in the cleditor.js available for download such that the fix from user Ling doesn't work. To get this plugin to work I have to use the minimized file, cleditor.min.js, which can't be fixed in the same way as Ling suggested, – Artema

Hey Tim, I've made adjustments to account for IE. It works in IE9's IE mode, although I'm not yet sure of an actual IE8 install -- I'll update if/when I get my hands on one. – Foresheet

Hey ima007, unfortunately using "contentWindow" doesn't work with html(). I'd like to preserve the formatting in $('x') if there was any applied. Have any suggestions for this? thanks -tim – Artema

See my newest edit. You'll have to search for the body within the iframe. – Foresheet

Awesome Ima007! your fiddle#84,jsfiddle.net/qm4G6/84, works in chrome, firefox, and IE9. In IE9 for some reason bold and italics don't show up in $('x'), but it is perfect otherwise. thanks again, -tim – Artema

Answer 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

Westberry

hi diglland, yes i can confirm Wesley's result, your updated code unfortunately doesn't work in IE, more ideas? thanks! – Artema

the other key issue with using "contentDocument" is that it can't be used with $this.html(); and so the text formatting (bold, color, etc.) is lost, this is true in chrome and firefox, bummer! – Artema