Cleditor

Patriarka · #1 (**permalink**) 23/11/2014, 06:43

Hola gente,
estoy trabajando con un Modern template que tiene la clase CLEDITOR que se le agrega a un textarea y genera el editor html.

Código HTML:

Ver original<textarea id="editor_ta" class="form-control cleditor" name="texto"></textarea>

el código anterior se parsea y genera el siguiente codigo:

Código HTML:

Ver original<div class="cleditorMain" style="width: auto; height: 253px;"><div class="cleditorToolbar" style="height: 27px;"><!-- aqui van los controls copy,bold, etc--></div>
 
<textarea id="editor_ta" class="form-control cleditor" name="texto" style="display: none; overflow: hidden; word-wrap: break-word; resize: none; height: 64px; width: 778px;">sdsd</textarea>
 
<!-- A PARTIR DEL TEXTAREA CON LA CLASE CLEDITOR GENERA ESTE IFRAME CON EL AREA EDITABLE -->
<iframe frameborder="0" src="javascript:true;" style="width: 778px; height: 223px;">
<html><head></head><body style="margin:4px; font:10pt Arial,Verdana; cursor:text">AQUI VA EL TEXTO QUE INGRESA EL USUARIO</body></html>
</iframe></div>

bueno, lo que no puedo lograr es detectar cuando un usuario hace PASTE o CONTROL+V
esto se logra con Jquery de esta manera:

Código Javascript:

Ver original$( document ).ready(function() {
        $("#editor_ta").bind('paste', function() {
            alert('debe limipiar de links y formato el texto')
        }); 
    });

Pero no funciona cuando el texarea tiene la clase CLEDITOR!!

alguien lo pudo solucionar? o si me puede ayudar le agradesco

saludos!

dAvidcA · #2 (**permalink**) 24/11/2014, 15:15

Hola Patriarka, después de un rato desordenando dicha librería y la documentación logré hacerlo así:

Código Javascript:

Ver originalvar editor = $("#editor_ta").cleditor()[0];
var editorFrame = editor.$frame[0].contentWindow.document;    
$(editorFrame).find('body').bind("paste", function() {
    alert('debe limipiar links y formato el texto')
});

Saludos.

Patriarka · #3 (**permalink**) 24/11/2014, 18:43

Sos un genio!
sabia que se podia pero nunca lo iba a descubrir.

lo siguiente es hacer lo que dice el alert: limpiar de html el texarea

entiendo que deberia ser algo asi:

Código Javascript:

Ver original<script>
$("#editor_ta").attr("value",strip_tags($("#editor_ta")[0].value));
 
function strip_tags(input, allowed) {
  allowed = (((allowed || '') + '')
    .toLowerCase()
    .match(/<[a-z][a-z0-9]*>/g) || [])
    .join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
  var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
    commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
  return input.replace(commentsAndPhpTags, '')
    .replace(tags, function($0, $1) {
      return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
    });
}
</script>

si lo hago en el firebug veo que me limpia el el texto y me devuelve una cadena sin tags html,
pero no se actualiza el CLEDITOR

como podria resolver esto?

dAvidcA · #4 (**permalink**) 25/11/2014, 07:21

Para modificar el texto del CLEDITOR usa:

Código Javascript:

Ver original$('#editor_ta').val('Mi nuevo texto').blur();

en tu caso:

Código Javascript:

Ver original$('#editor_ta').val( strip_tags($('#editor_ta').val()) ).blur();

No estoy contextualizado de lo que quieres hacer en general pero creo que debes tener en cuenta lo siguiente:

Si quieres limpiar de html el textarea y lo haces dentro del .bind('paste') debes tener en cuenta que justo en ese momento el CLEDITOR no tiene incluido el texto que llega en el 'portapapeles' (paste).

Para ver el texto que se está "pegando" debes incluir en el bind el 'evento' y desde ese 'evento' extraer el texto, ejemplo:

Código Javascript:

Ver original$(editorFrame).find('body').bind("paste", function(event) {
    var dataPaste = event.originalEvent.clipboardData.getData('Text'); //obtener texto del portapapeles
    alert("Texto a pegar: "+dataPaste);
});

Saludos.

Patriarka · #5 (**permalink**) 25/11/2014, 09:14

Hola
lo tengo que hacer es solo limpiar de html el texto que estoy pegando
el resto del texto deberia quedar intacto