ASP.NET MVC 3 unobtrusive validation, submit and TinyMCE

Question

We have our own built-in file / image / document manager for TinyMCE, which is still ported to jQuery. In the meantime, some of our projects that rely on the availability of these features should use the TinyMCE version and the TinyMCE prototype and jQuery.noConflict (). This works great, but with unobtrusive validation in ASP.NET MVC 3, submit verification takes place before the TinyMCE callback is called to copy the TinyMCE content to the form field. Is it possible to connect to the preliminary check event in an unobtrusive check?

Answer 1

If you use the submit buttons to submit the form, try the following:

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

If you do not use submit buttons, just connect to any event immediately before submitting the form and call tinyMCE.triggerSave ().

Answer 2

Another way to do this that gives you more control is to initialize TinyMCE. This works well, except for one case: the last TinyMCE instance that you exit does not raise the onDeactivate event in TinyMCE (this is only a trigger when you switch to another TinyMCE instance). So, here is a way around this - for now it works well, but YMMV.

Note. I would use this in combination with the accepted answer. This code launches a check because the content is being edited in TinyMCE.

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

And our setup method:

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

Finally, a bonus element that is completely unrelated: you can add a character counter by including this feature in your JavaScript source code:

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

And in the above ValidationTinyMceSetup method add:

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

To just add data-val-length-max="250" to your textarea tag or whatever you use, TinyMCE!