¿Cómo hacer que TinyMCE y Jquery validen para trabajar juntos?

Question

Estoy usando jquery validate y la versión jquery de tinymce.

Encontré este fragmento de código que hace que tinymce se valide cada vez que algo cambia en él.

Hola

estoy usando la validación de jQuery con mi tinymce jQuery así que tengo esto en mi código

// update validation status on change 
    onchange_callback: function (editor) 
    { 
     tinyMCE.triggerSave(); 
     $("#" + editor.id).valid(); 
    }, 

Esto funciona sin embargo, hay un problema. Si un usuario copia algo de la palabra, trae todo ese estilo de basura con lo que suele ser más de 50,000 caracteres. Esto es mucho más que la cantidad de caracteres que un usuario puede escribir.

Así que mi método de validación de jquery suena diciéndome que han excedido el límite. Mientras tanto, tinymce ha limpiado ese lío y podría ser posible ahora que el usuario no ha sobrepasado el límite.

Sin embargo, el mensaje sigue ahí.

Entonces, ¿hay una mejor función de llamada que pueda poner en esto? ¿Quizás le pidas a tinymce que demore la versión válida cuando se está produciendo una conversión, o quizás una devolución de llamada diferente?

¿Alguien tiene alguna idea?

Answer 1

Oh sí, también me enfrenté a este problema.

Por lo tanto, lo arreglé llamando a la validación en el evento click de un botón en su lugar.

$("#buttontosave").click(function() { 
     tinyMCE.triggerSave(); 
     var status; 
     status = $("#myform").valid(); //Validate again 
     if(status==true) { 
      //Carry on 
     } 
     else { } 
}); 

This works try it.

Para obtener recursos adicionales tratan

http://rmurphey.com/blog/2009/01/12/jquery-validation-and-tinymce/

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=21588

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_23941005.html

Answer 2

Recientemente, he tenido algunas dificultades relacionadas con el momento de cuando los controladores de eventos de incendios, sobre todo porque el tamaño del carácter El buffer pegado desde Word aumenta. El evento que me interesó fue la clave: a medida que el usuario escribe en un campo de título (para una publicación de blog), la aplicación actualiza un campo de enlace permanente generado automáticamente. Terminé con un enfoque de cinturones y tirantes: manejar la llave y manejar el evento de cambio, por las dudas. Una versión abreviada de mi código:

hdlHeadlineChange = function (code) { 

    //NOTES: The 'code' argument is for debugging purposes only: it helps you 
    //figure out which event has fired. 

    var headlineText = $(tinyMCE.selectedInstance.getBody()).text(); 

    //heuristically detect and ignore text with embedded Microsoft Word markup 
    if (headlineText.match(/<!--/)) { 
     return; 
    } 

    //as a backstop, trim excessively long text to fit database maximum lengths 
    var truncateLength;  
    var semanticTitle = replaceSpecialCharactersInSemanticUrl(headlineText); 

    //trim the permalink to fit the 255-character max in the database    
    truncateLength = 255 - $('#permalinkPreface').text().length; 
    $('#permalinkSpan').text(semanticTitle.substring(0, truncateLength)); 
}; 

function setupHeadlineEventHandlers() { 
    tinyMCE.get("headline").onKeyUp.add(function(ed, evt) { 
     hdlHeadlineChange(evt.keyCode); 
    }); 

    //NOTES: This handler is sort of a backstop. Although the key-up handler may see text 
    //with markup, we expect that the change handler will not. 
    $('#headline').change(function() { 
     hdlHeadlineChange(-1); 
    }); 
} 

El punto clave es que he usado .Cambiar() para activar el controlador de eventos, en lugar de onchange_callback.

Answer 3

Esto funcionó para mí ... Valor añadido de la pequeña área de texto campo para

$(document).ready(function(){ 

    var form_validator = $("#form").validate({...}); 
}); 

function Valid() 
{ 
var content= tinyMCE.get('desc').getContent(); 
$('#desc').val(content); 
    return false; 
} 

<form id='form' onSubmit='return Valid();'> 
<textarea id='desc'></textarea> 

Answer 4

Después de horas de tocar el violín cómo conseguir la validación trabajar con un editor TinyMCE que finalmente encontré que es necesario contar la el complemento de validación para NO ignorar los campos ocultos (ya que el área de texto original está oculta cuando se inicializa el tinyMCE).Así que la solución en pocas palabras es:

$.validator.setDefaults({ 
    ignore: '' 
}); 

Este código indica al jQuery Plugin de validación para comprobar los campos ocultos, así ... y luego se puede normalmente ...

onchange_callback: function (editor) 
{ 
    tinyMCE.triggerSave(); 
    $("#" + editor.id).valid(); 
}, 

Esto no es una respuesta directa a la pregunta original, lo sé. Pero como esta página es # 1 en google para "jquery validate tinymce", creo que es un buen lugar para mencionarla aquí.

danludwig mencionó esta aquí: Unable to get TinyMCE working with jQuery Unobtrusive Validation

Answer 5

El problema es que el contenido del editor todavía no se ha copiado en el área de texto relacionado cuando se ejecuta la validación. La solución sugerida en http://rmurphey.com/blog/2009/01/12/jquery-validation-and-tinymce/ me funciona. Lo generalicé un poco porque en mi caso el número de textareas y sus ID no se conocían antes del tiempo de ejecución.

Así, en el controlador de eventos click que copiar los valores a lo largo manualmente para cada editor TinyMCE:

for (var i = 0; i < tinyMCE.editors.length; i++) { 
    var textarea = tinyMCE.editors[i].getElement(); 
    var newText = tinyMCE.editors[i].getContent();  
    $(tinyMCE.editors[i].getElement()).text(newText); 
} 

Answer 6

esto funciona para mí:

 
    var form = $('form').validate({ .... }); 

    tinyMCE.init({ 

     ..... 

     setup: function(ed){ 
      ed.on('blur', function() { 
       $("textarea").html(tinyMCE.activeEditor.getContent()); 
      }); 
     } 
    }); 

Espero que esto funcione para usted , también

Answer 7

Gracias a Willhelm que me dan la idea (desafortunadamente su código no funcionó si tu y más de un área de texto en su forma).

Ésta es la manera correcta de hacerlo:

tinymce.init({ 
     setup: function(ed){ 
      ed.on("blur", function() { 
       $("#" + ed.id).val(tinyMCE.activeEditor.getContent()); 
      }); 
     } 
    } 

De esta manera no es necesario tocar el código de validación en absoluto.

Answer 8

Ver esta demo aquí para obtener la documentación más reciente sobre jquery.validation y tinymce juntos: https://jqueryvalidation.org/files/demo/tinymce/

Hay algunas partes a la misma:

1. Aunque área de texto de tinymce está oculto, nos necesita incluir en la lista blanca el elemento para que el validador pueda ejecutarse en él.

   $.validator.setDefaults({ 
       ignore: ":hidden:not(.rich-text-editor)" 
   }); 
   

2. Inicializar tinymce para que perdure su valor para el textarea que subyace en el cambio.

   tinymce.init({ 
       selector: 'textarea.rich-text-editor', 
       init_instance_callback: function (editor) { 
        // update validation status on change` 
        editor.on("Change", function (e) { 
         tinyMCE.triggerSave(); 
         $(editor.targetElm).valid(); 
        }); 
       } 
   }); 
   

3. subyacentes se mantienen, el textarea s antes de presentar cualquier forma.

   var forms = $("form"); 
   if (forms.length > 0) { 
       var validator = forms.submit(function() { 
        // update underlying textarea before submit validation 
        tinyMCE.triggerSave(); 
       }).validate(); 
   

4. actualización de la validator 's focusInvalid función para tratar áreas de texto de TinyMCE especiales

   validator.focusInvalid = function() { 
        // put focus on tinymce on submit validation 
        if (this.settings.focusInvalid) { 
         try { 
          var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []); 
          if (toFocus.is("textarea")) { 
           tinyMCE.get(toFocus.attr("id")).focus(); 
          } else { 
           toFocus.filter(":visible").focus(); 
          } 
         } catch (e) { 
          // ignore IE throwing errors when focusing hidden elements 
         } 
        } 
       } 
   } 
   

Nota: Es posible que desee para rodear su código tinymce por el siguiente bloque en caso de que haya un problema al cargar tinymce (o el JS no está incluido en ciertas páginas).

if (typeof tinymce !== "undefined")