ASP.NET MVC 3不引人注意的validation,提交和TinyMCE

我们为TinyMCE提供了一个内部开发的文件/图像/文档管理器插件,该插件仍然被移植到jQuery。 与此同时,我们的一些依赖于这些function的项目需要使用基于Prototype的TinyMCE和jQuery.noConflict()版本。 这很好,但是在ASP.NET MVC 3中进行不显眼的validation时,提交的validation发生在TinyMCE回调之前,将TinyMCE的内容复制到表单字段被触发。 是否有可能在不显眼的validation中挂钩进入预validation事件?

如果您使用提交按钮发布表单,请尝试以下操作:

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

如果你没有使用提交按钮,只需勾选在表单提交之前发生的任何事件,并调用tinyMCE.triggerSave()。

在TinyMCE初始化中,另一种可以提供更多控制的方法。 这种情况很有效,除了一种情况:退出的最后一个TinyMCE实例不会触发TinyMCE中的onDeactivate事件(只有当你转到另一个TinyMCE实例时才会触发)。 所以这是一种解决这个问题的方法 – 到目前为止它似乎运行良好,但YMMV。

注意:我会将此与已接受的答案结合使用。 当在TinyMCE中编辑内容时,此代码会触发validation。

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

我们的设置方法:

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

最后,一个完全不相关的奖励项:您可以通过在JavaScript源中包含此函数来添加字符计数器:

 function CharacterCountDisplay(current, max) { if (current <= max) { return current + ' of ' + max + ' characters max'; } else { return '' + current + ' of ' + max + ' characters'; } } 

并在上面的ValidationTinyMceSetup方法中添加:

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

要使用简单的data-val-length-max="250"到你的textarea标签或者你正在使用TinyMCE的任何东西!