jQuery Cleditor obtener el valor textarea en la tecla

Question

Estoy usando Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html. Quiero obtener el valor en keyup e insertar el texto en otro div. cleditor viene con el evento change() que estoy usando actualmente en el ejemplo jsfiddle a continuación, pero no es lo mismo que keyup. Quiero que el div se actualice mientras escribo. Intenté la tecla pero no funciona.

Esto es lo que tenemos ahora

$("#input").cleditor().change(function(){ 
    var v = $('#input').val(); 
    $('#x').html(v); 
}) 

Comprobar jsFiddle http://jsfiddle.net/qm4G6/11/

Answer 1

Parece que cleditor oculta la textarea y lo reemplaza con un iframe (véase la línea 203 de la fuente de cleditor).

Así que para lograr lo que desea, sólo tiene que acceder a los iframe contenido resultante:

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

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

Updated jsFiddle

actualización para solucionar el comentario de Tim

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

Updated jsFiddle

ACTUALIZACIÓN 2

usuario ima007 fue capaz de encontrar una mejor solución multi-navegador: jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE

Answer 2

yo era capaz de lograr esto modificando ligeramente el código fuente del editor - en el método refresh (línea 801) Modifiqué el manejador de eventos blur de iframe doc.

Anterior

// Update the textarea when the iframe loses focus 
    ($.browser.mozilla ? $doc : $(contentWindow)).blur(function() { 
     updateTextArea(editor, true); 
    }); 

modificado para

// Update the textarea when the iframe loses focus or keyup happens 
     ($.browser.mozilla ? $doc : $(contentWindow)).bind('blur keyup', function (e) { 
      updateTextArea(editor, true); 

      if (options.keyup && e.type === 'keyup') 
       options.keyup(editor.$area.val()); 
     }); 

y en las opciones que se pasan en el momento de la inicialización, se puede definir

$("#element").cleditor({ 
keyup : function (text) { 
alert(text); 
// do something 
} 
}); 

Espero que esto ayude a nadie.

Saludos

Answer 3

¿Ha intentado utilizar de '.doc' CLEditor propiedad?

doc - El objeto de documento que se está editando en el iframe. cleditor documentation

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

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