jQuery Cleditor wysiwyg text editor: keyup() funziona nei browser webkit ma non Firefox o IE

Question

Sto provando a seguire una precedente domanda StackOverflow su come visualizzare il contenuto da una casella di testo Cleditor in un elemento HTML esterno come un <p>. Ecco the question e the fiddle che risolve il mio problema nel browser WebKit, ma non Firefox o IE:

Ecco il codice dal violino:

<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> 

ho letto Get content of iframe from jquery che ho bisogno di usare "window.top. ... per accedere alla pagina principale e passare in questo modo perché .contents() non è supportato da tutti i browser "ma non sono sicuro di come usare window.top per questo scopo e spero che qualcuno possa essere in grado di gettare un po ' luce su questo argomento.

Answer 1

La documentazione cleditor afferma che esso ha un evento di "cambiamento" che sostiene di lavorare con l'evento 'keyup', ma purtroppo nel mio test non ha funzionato come previsto con Firefox 7 (richiede di fare clic sull'editor di testo).

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

Codice:

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

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

C'è anche un'altra questione StackOverflow, che ha chiesto la stessa cosa, in cui l'utente Ling suggerisce di modificare il plugin aggiungere la propria funzione: Get content from jquery CLEditor

Modifica: In base ai commenti dell'utente con il precedente problema SO, il risultato non funziona, ho modificato il codice seguente. Funziona in modalità sviluppatore "IE8" di IE9 e IE9. 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); 
}); 

}); 

Un altro Modifica: Per ottenere il codice HTML, è necessario trovare il corpo all'interno del iframe come $(this).find("body").html(). Guarda il codice qui sotto. 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

Da quando ho risposto alla domanda che ti ha spinto a questo, credo che dovrò rispondere anche questo;)

Questo funziona in Chrome e Firefox (non ho accesso a 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

Questo funziona anche in Chrome e Firefox. Forse anche io?

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

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

jsFiddle