ASP.NET MVC 3 눈에 띄지 않는 유효성 검사, 제출 및 TinyMCE

Question

우리는 여전히 jQuery로 이식중인 TinyMCE 용 자체 개발 파일/이미지/문서 관리자 플러그인을 보유하고 있습니다. 한편, 이러한 기능을 사용하는 데 의존하는 프로젝트 중 일부는 TinyMCE & jQuery.noConflict()의 프로토 타입 기반 버전을 사용해야합니다. 이것은 잘 작동하지만 ASP.NET MVC 3에서 눈에 거슬리지 않은 유효성 검사를 수행하면 TinyMCE의 콜백이 양식 필드로 복사되기 전에 제출 검증이 실행됩니다. 눈에 거슬리지 않는 유효성 검사에서 사전 유효성 검사 이벤트에 연결할 수 있습니까? 양식을 게시 할 전송 버튼 사용하는 경우

Answer 1

,이 시도 :

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

당신이 버튼을 제출 사용하지 않는 경우, 단지 (tinyMCE.triggerSave를 이벤트 양식 제출 직전에 무슨 일이 생기면로 끼어 전화).

Answer 2

더 자세히 제어 할 수있는 또 다른 방법은 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'; 
    } 
} 

: 당신은 당신의 자바 스크립트 소스에서이 기능을 포함하여 문자 카운터를 추가 할 수 있습니다

그리고 위의 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); 
} 

텍스트 마커 태그 또는 TinyMCE를 사용중인 모든 문자에 data-val-length-max="250"을 추가하기 만하면됩니다.