Come convalidare TinyMCE e Jquery per lavorare insieme?

Question

Sto usando jquery validate e la versione jquery di tinymce.

Ho trovato questo pezzo di codice che fa sì che tinymce si convalidi ogni volta che qualcosa cambia in esso.

Hi

Sto usando il validate jquery con il mio jquery TinyMCE così ho questo nel mio codice

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

Questo funziona però c'è un problema. Se un utente copia qualcosa dalla parola, porta con sé tutto lo stile di spazzatura che di solito supera i 50.000 caratteri. Questo è molto oltre la mia quantità di caratteri che un utente è autorizzato a digitare.

Quindi il mio metodo di validazione jquery si spegne dicendomi che sono andati oltre il limite. Nel frattempo anche se tinymce ha ripulito quel casino e potrebbe essere possibile ora l'utente non ha oltrepassato il limite.

Eppure il messaggio è ancora lì.

Quindi c'è una chiamata di funzione migliore in cui posso inserire questo? Forse dire a tinymce di posticipare la validità quando sta succedendo una pasta, o magari un callback diverso?

Qualcuno ha qualche idea?

Answer 1

Oh sì, ho anche affrontato questo problema.

Quindi, l'ho risolto chiamando la convalida sull'evento click di un pulsante.

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

Questo funziona provalo.

Per le risorse aggiuntive cercano

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

Recentemente, ho avuto qualche difficoltà connesse con i tempi di quando i gestori di eventi del fuoco, in particolare per quanto la dimensione del carattere il buffer inserito da Word aumenta. L'evento a cui ero interessato era il key-up: quando l'utente digita un campo titolo (per un post sul blog), l'app aggiorna un campo di permalink generato automaticamente. Mi sono ritrovato con un approccio "cintura e bretelle": gestisci la key-up e gestisci l'evento di cambiamento, per ogni evenienza. Una versione ridotta del mio codice:

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); 
    }); 
} 

Il punto chiave è che ho usato .Per passare() per inserire il gestore di eventi, piuttosto che onchange_callback.

Answer 3

Questo ha funzionato per me ... ho aggiunto valore del campo piccolo per textarea

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

Dopo ore di giocherellare come ottenere la convalida lavorare con un editor TinyMCE ho finalmente scoperto che è necessario dire la plugin di convalida per NON ignorare i campi nascosti (poiché la textarea originale è nascosta quando tinyMCE è inizializzato).Quindi la soluzione in breve è quella di:

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

Questo codice dice la convalida plugin per jQuery per controllare campi nascosti così ... e poi si può normalmente ...

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

Questo non è una risposta diretta alla domanda originale - lo so. Ma dal momento che questa pagina è # 1 di google per "jquery validate tinymce" penso che sia un buon posto per menzionarlo qui.

danludwig parlato di questo qui: Unable to get TinyMCE working with jQuery Unobtrusive Validation

Answer 5

Il problema è che il contenuto dell'editor non è ancora stato copiato nella relativa area di testo quando si esegue la convalida. La soluzione suggerita al http://rmurphey.com/blog/2009/01/12/jquery-validation-and-tinymce/ funziona per me. L'ho generalizzato un po 'perché nel mio scenario il numero di textareas e i loro ID non erano noti prima del runtime.

Quindi nel gestore di eventi click ho copiare i valori sopra manualmente per ogni editor di 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

questo funziona per me:

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

    tinyMCE.init({ 

     ..... 

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

Spero che questo funziona per voi

Answer 7

Grazie a Willhelm che mi ha dato l'idea (purtroppo il suo codice non ha funzionato se si h annuncio più di una textarea nel tuo modulo).

Questo è il modo corretto per farlo:

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

In questo modo non abbiamo bisogno di toccare il codice di convalida a tutti.

Answer 8

Vedere questa demo qui per le ultime documentazione su jquery.validation e TinyMCE insieme: https://jqueryvalidation.org/files/demo/tinymce/

ci sono alcune parti di esso:

1. Anche se textarea di TinyMCE è nascosto, abbiamo è necessario autorizzare l'elemento in modo che il validatore possa essere eseguito su di esso.

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

2. Inizializza tinymce modo che conserva il proprio valore del sottostante textarea sul cambiamento.

   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. persistenti i sottostanti textarea s prima di inviare qualsiasi forma.

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

4. Aggiornare il validator s' focusInvalid funzione per il trattamento di textarea di TinyMCE speciali

   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: Si consiglia di circondare il codice di TinyMCE dal seguente blocco nel caso ci sia un TinyMCE problema di carico (o il JS non è incluso in alcune pagine.)

if (typeof tinymce !== "undefined") 

0.123.