[英]ASP.NET MVC 3 unobtrusive validation, submit and TinyMCE
我们为TinyMCE提供了一个内部开发的文件/图像/文档管理器插件,该插件仍然被移植到jQuery。 与此同时,我们的一些依赖于这些功能的项目需要使用基于Prototype的TinyMCE和jQuery.noConflict()版本。 这样可以正常工作,但是在ASP.NET MVC 3中进行不显眼的验证时,提交的验证发生在TinyMCE回调之前,将TinyMCE的内容复制到表单字段被触发。 是否可以在不显眼的验证中挂钩预验证事件?
如果您使用提交按钮发布表单,请尝试以下操作:
$("input[type='submit']").click(function () {
tinyMCE.triggerSave();
});
如果你没有使用提交按钮,只需勾选在表单提交之前发生的任何事件,并调用tinyMCE.triggerSave()。
在TinyMCE初始化中,另一种可以提供更多控制的方法。 除了一种情况之外,这很有效:退出的最后一个TinyMCE实例不会触发TinyMCE中的onDeactivate事件(只有当你转到另一个TinyMCE实例时才会触发)。 所以这是解决这个问题的一种方法 - 到目前为止它似乎运行良好,但YMMV。
注意:我会将此与已接受的答案结合使用。 当在TinyMCE中编辑内容时,此代码会触发验证。
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 '<span style="color: red;">' + current + '</span> 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的任何东西!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.