Validación no intrusiva de ASP.NET MVC 3, enviar y TinyMCE

Question

Tenemos un complemento interno de administrador de archivos/imágenes/documentos desarrollado para TinyMCE que todavía se transfiere a jQuery. Mientras tanto, algunos de nuestros proyectos que dependen de estas características deben usar la versión basada en prototipos de TinyMCE & jQuery.noConflict(). Sin embargo, esto funciona bien con una validación discreta en ASP.NET MVC 3, la validación en el envío ocurre antes de que se active la devolución de llamada de TinyMCE para copiar el contenido de TinyMCE al campo de formulario. ¿Es posible enganchar en un evento de prevalidación en la validación discreta?

Answer 1

Si está utilizando los botones de envío para enviar el formulario, intente esto:

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

Si usted no está usando los botones de envío, simplemente conectar en cualquier evento que ocurre inmediatamente antes de su presentación formulario y llame tinyMCE.triggerSave ()

Answer 2

Otra forma de hacerlo que le da más control es en la inicialización de TinyMCE. Esto funciona bien, excepto en un caso: la última instancia de TinyMCE que sale no activa el evento onDeactivate dentro de TinyMCE (solo se activa cuando va a otra instancia de TinyMCE). Así que aquí hay una manera de evitar esto: hasta ahora parece funcionar bien, pero YMMV.

Nota: Utilizaría esto junto con la respuesta aceptada. Este código activa la validación ya que el contenido se está editando en TinyMCE.

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

Y nuestro método de configuración:

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

Por último, un punto de bonificación que no tiene relación alguna: se puede añadir un contador de caracteres mediante la inclusión de esta función en su fuente de 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'; 
    } 
} 

Y en el método ValidationTinyMceSetup anterior, agregar:

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

Para usar simplemente agrega un data-val-length-max="250" a tu etiqueta textarea o lo que sea que estés usando TinyMCE.