ASP.NET MVC 3 convalida discreta, invio e TinyMCE

Question

Abbiamo un plug-in di file/immagine/gestione documenti sviluppato internamente per TinyMCE che viene ancora trasferito su jQuery. Nel frattempo, alcuni dei nostri progetti che si basano sull'avere queste funzionalità devono utilizzare la versione basata su Prototype di TinyMCE & jQuery.noConflict(). Funziona bene tuttavia con la convalida non invadente in ASP.NET MVC 3 la convalida su submit avviene prima che il callback TinyMCE per copiare i contenuti di TinyMCE sul campo modulo sia attivato. È possibile agganciare un evento di pre-convalida nella convalida non invadente?

Answer 1

Se si utilizza bottoni di invio di inviare il modulo, provate questo:

$("input[type='submit']").click(function() { 
    tinyMCE.triggerSave(); 
}); 

Se non stai utilizzando i pulsanti di invio, basta agganciare in qualunque evento si verifica immediatamente prima scheda di iscrizione e chiamare tinyMCE.triggerSave ().

Answer 2

Un altro modo per ottenere questo controllo maggiore è l'inizializzazione di TinyMCE. Funziona bene tranne per un caso: l'ultima istanza TinyMCE che si esce non attiva l'evento onDeactivate in TinyMCE (è solo trigger quando si passa a un'altra istanza di TinyMCE). Quindi ecco un modo per ovviare a questo - finora sembra funzionare bene ma YMMV.

Nota: lo utilizzerei insieme alla risposta accettata. Questo codice attiva la convalida mentre il contenuto viene modificato in TinyMCE.

tinyMCE.init({ 
    ... 
    setup: ValidationTinyMceSetup 
}); 

E il nostro metodo di configurazione:

function ValidationTinyMceSetup(editor) { 
    var $textarea = $('#' + editor.editorId); 

    // method to use to save editor contents to backend input field (TinyMCE hides real input and syncs it up 
    // with values on form submit) -- we need to sync up the hidden input fields and call the valid() 
    // method from jQuery unobtrusive validation if it is present 
    function save(editor) { 
     if (editor.isDirty) { 
      editor.save(); 
      var $input = $('#' + editor.editorId); 
      if (typeof $input.valid === 'function') 
       $input.valid(); 
     } 
    } 

    // Save tinyMCE contents to input field on key/up down (efficiently so IE-old friendly) 
    var typingTimerDown, typingTimerUp; 
    var triggerDownSaveInterval = 1000;  // time in ms 
    var triggerUpSaveInterval = 500;  // time in ms 

    editor.onKeyDown.add(function (editor) { 
     clearTimeout(typingTimerDown); 
     typingTimerDown = setTimeout(function() { save(editor) }, triggerDownSaveInterval); 
    }); 

    editor.onKeyUp.add(function() { 
     clearTimeout(typingTimerUp); 
     typingTimerUp = setTimeout(function() { save(editor) }, triggerUpSaveInterval); 
    }); 


    // Save tinyMCE contents to input field on deactivate (when focus leaves editor) 
    // this is via TAB 
    editor.onKeyDown.add(function (editor, event) { 
     if (event.keyCode === 9) 
      save(editor); 
    }); 

    // this is when focus goes from one editor to another (however the last one never 
    // triggers -- need to enter another TinyMCE for event to trigger!) 
    editor.onDeactivate.add(function (editor) { 
     save(editor); 
    }); 
} 

Infine, un elemento di bonus che è completamente estraneo: è possibile aggiungere un contatore di caratteri includendo questa funzione nel vostro sorgente JavaScript:

function CharacterCountDisplay(current, max) { 
    if (current <= max) { 
     return current + ' of ' + max + ' characters max'; 
    } 
    else { 
     return '<span style="color: red;">' + current + '</span> of ' + max + ' characters'; 
    } 
} 

E nel metodo ValidationTinyMceSetup precedente aggiungere:

// check for character count data-val 
var character_max = $textarea.attr('data-val-lengthignoretags-max'); 
if (typeof character_max === 'undefined' || character_max === false) { 
    character_max = $textarea.attr('data-val-length-max'); 
} 
if (typeof character_max !== 'undefined' && character_max !== false) { 
    var character_count = function (editor) { 
     var currentLength = $(editor.getDoc().body).text().length; 
     editor.dom.setHTML(tinymce.DOM.get(editor.id + '_path_row'), CharacterCountDisplay(currentLength, character_max)); 
    }; 

    // on load show character count 
    editor.onInit.add(character_count); 

    // while typing update character count 
    editor.onKeyUp.add(character_count); 
} 

Per utilizzare semplicemente aggiungere uno data-val-length-max="250" al tag textarea o qualsiasi altra cosa si sta utilizzando TinyMCE!