jQuery Cleditor editor de text wysiwyg: keyup () funciona en browseres webkit pero no en Firefox o IE

Estoy tratando de dar seguimiento a una pregunta anterior de Stackoverflow sobre cómo mostrar el contenido de un textbox de Cleditor en un elemento HTML externo, como un <p> . Aquí está la pregunta y el violín que resuelve mi problema en los browseres webkit pero no en Firefox o IE:

Aquí está el código del violín:

 <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 desinetworking $('#x').html(v); }); </script> 

He leído Obtener contenido de iframe de jquery que necesito usar "window.top …. para acceder a la página principal y pasarlo de esa manera porque .contents () no es compatible con todos los browseres" pero no estoy seguro de cómo usar window.top para este propósito y espero que alguien pueda arrojar algo de luz sobre este tema.

La documentation de cleditor indica que tiene un evento de "cambio" que dice que funciona con el evento 'keyup', pero desafortunadamente en mis testings no funcionó como se esperaba con Firefox 7 (requiere hacer clic fuera del editor de text) .

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

Código:

 var cledit = $("#input").cleditor()[0]; cledit.change(function(){ var v = this.$area.context.value; $('#x').html(v); }); 

También hay otra pregunta de StackOverflow que pregunta acerca de lo mismo, en la que el usuario Ling sugiere modificar el complemento para agregar su propia function: Obtener contenido de jquery CLEditor

Editar: En function de sus comentarios con el resultado de la pregunta SO más arriba no funciona, he modificado el código a continuación. Esto funciona en IE9 y el modo de desarrollador IE8 "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); }); }); 

Otra Edición: Para get el HTML, debe search el cuerpo dentro del iframe como $(this).find("body").html() . Vea el código a continuación. 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); }); 

Desde que respondí la pregunta que lo motivó a hacerlo, creo que también responderé a esto;)

Esto funciona en Chrome y Firefox (no tengo acceso a IE):

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

JsFiddle actualizado

ACTUALIZAR

Esto también funciona en Chrome y Firefox. Quizás IE también?

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

jsFiddle

    Intereting Posts