ASP.NET MVC 3 unobtrusive xác nhận, trình và TinyMCE

Question

Chúng tôi có một nhà phát triển tập tin/hình ảnh/tài liệu quản lý plugin cho TinyMCE mà vẫn đang được chuyển sang jQuery. Trong thời gian đó, một số dự án của chúng tôi dựa vào việc có các tính năng này cần sử dụng phiên bản dựa trên Prototype của TinyMCE & jQuery.noConflict(). Điều này hoạt động tốt tuy nhiên với xác nhận không phô trương trong ASP.NET MVC 3 xác nhận trên trình xảy ra trước khi gọi lại TinyMCE để sao chép nội dung TinyMCE'ed vào trường biểu mẫu được kích hoạt. Có thể móc vào một sự kiện xác nhận trước trong xác nhận không phô trương không?

Answer 1

Nếu bạn đang sử dụng trình nút để gửi các hình thức, hãy thử này:

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

Nếu bạn không sử dụng trình nút, chỉ cần treo vào bất cứ sự kiện xảy ra ngay trước khi nộp mẫu đơn và gọi tinyMCE.triggerSave ().

Answer 2

Một cách khác để giải quyết vấn đề này mang lại cho bạn nhiều quyền kiểm soát hơn trong quá trình khởi chạy TinyMCE. Điều này làm việc tốt ngoại trừ một trường hợp: trường hợp TinyMCE cuối cùng bạn thoát không kích hoạt sự kiện onDeactivate trong TinyMCE (nó chỉ kích hoạt khi bạn đi đến một cá thể TinyMCE khác). Vì vậy, đây là một cách để làm việc xung quanh điều này - cho đến nay nó có vẻ hoạt động tốt nhưng YMMV.

Lưu ý: Tôi sẽ sử dụng điều này cùng với câu trả lời được chấp nhận. Mã này kích hoạt xác thực vì nội dung đang được chỉnh sửa trong TinyMCE.

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

Và phương pháp thiết lập của chúng tôi:

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

Cuối cùng, một mục tiền thưởng đó là hoàn toàn không liên quan: bạn có thể thêm một bộ đếm kí tự bằng cách bao gồm chức năng này trong nguồn JavaScript của bạn:

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

Và ở trên phương pháp ValidationTinyMceSetup thêm:

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

Để sử dụng, chỉ cần thêm data-val-length-max="250" vào thẻ textarea của bạn hoặc bất cứ thứ gì bạn đang sử dụng TinyMCE!