ASP.NET MVC 3不显眼的验证，提交和TinyMCE

我们为TinyMCE开发了一个内部开发的文件/图像/文档管理器插件，该插件仍在移植到jQuery中。同时，依赖于这些功能的一些项目需要使用基于原型的TinyMCE & jQuery.noConflict（）。这可以正常工作，但在ASP.NET MVC 3中进行不显眼的验证时，提交验证发生在TinyMCE回调将TinyMCE的内容复制到表单字段之前触发。在不显眼的验证中，是否有可能挂钩预验证事件？ASP.NET MVC 3不显眼的验证，提交和TinyMCE

来源

2011-02-05 Cymen

如果您正在使用的提交按钮后的形式，试试这个：

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

如果你不使用提交按钮，只是挂钩到任何事件表单提交之前立即发生，并呼吁tinyMCE.triggerSave（）。

来源

2011-02-06 07:04:30 ctsears

This Works！我一直在想它，并担心有人用'triggerSave（）'声明bug。我这样做：在'tinyMCE.init（{oninit：mySpecialSubmit，...}）;'和'mySpecialSubmit'具有'triggerSave（）'调用。它很棒！谢谢！ – Cymen

不要忘记把它放在'$（document）.ready（function（）{}）'中。 –

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

最后，这是完全不相关的加分项：

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

：你可以通过在你的JavaScript源这一功能添加字符计数器

并在上述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！

来源

2011-12-15 17:35:49 Cymen

ASP.NET MVC 3不显眼的验证，提交和TinyMCE

回答

相关问题