TinyMCE의 isDirty 메소드

Question

나는 카드 제작 웹 프로젝트를 운영하고 있습니다. 나는 작은 MCE 텍스트 필드와 카드의 시각을 가지고있다. tinyMCE 편집기의 내용을 변경하면 카드의 비주얼을 업데이트하여 새로운 텍스트/변경 사항을 반영하고 싶습니다.

TinyMCE에는 IsDirty 사용 방법과 함께 제공 : 문을 정기적으로 확인하는 경우, 나는이를 배치하는 위치에

if (tinyMCE.activeEditor.isDirty()) 
    alert("You must save your contents."); 

는 내가 이해하지 못하는 것은. JS가 이벤트 중심적이며 "호출"되어야한다는 것을 이해합니다. 모든 키 누르기라고합니다.

Answer 1

당신은 글로벌 타임 아웃 기능을 추가 할 수있는 모든 (간격이 당신에게 달려있다) 초 정도 검사 :

function updateCardIfDirty() { 
    if (tinyMCE.isDirty()) { 
    // rerender the card 
    } 
} 

setInterval(updateCardIfDirty, 2000); // check every 2 seconds. 

청소기 솔루션은 TinyMCE를 편집기에서 변경을 할 때마다 확인하는 수 있습니다 .

tinyMCE.init({ 
    ... 
    setup : function(ed) { 
    ed.onChange.add(function(ed, l) { 
     // rerender the card 
    }); 
    } 
}); 

첫 번째 방법의 단점은 그들이 시간 동안 카드를 편집 해달라고해도, 2 초마다 실행하는 것입니다 다음과 같이 이것은 onChange() 이벤트 tinyMCE provides에 의해 가능하게 할 수있다. 두 번째 접근법의 단점은 1 초에 10 번 편집을 수행하면 두 번째 방법으로 10 번 카드를 다시 렌더링한다는 것입니다.

그래서 마지막의 두 세계의 최고를 유도 할 수있는 세 번째 방법을 시도하자, 우리가 언급 한 두 단점을 잃는 : 나는 현재이 점에서 TinyMCE에 문제를 해결하는 방법을 참조하려고

tinyMCE.init({ 
    ... 
    setup : function(ed) { 
    ed.onChange.add(function(ed, l) { 

     if (timeout) { 
      clearTimeout(timeout); 
     } 

     timeout = setTimeout(function(){ timeout=null; rerenderCard(); }, 1000); 

    }); 
    } 
}); 

Answer 2

. TinyMCE 외부의 현재 크로스 브라우저 솔루션은 대부분의 현재 브라우저에서 지원되는 OnTextChange DOM 이벤트를 사용하는 것입니다. 오늘 테스트를 해보면 비 키보드 오른쪽 클릭 컷/붙여 넣기/삭제와 키보드 변경에 정말 좋습니다. textchange 이벤트에 필요한 키보드 이벤트가 없습니다. (참고로, DOM, Google jquery.textchange.js 플러그인에서 준비해야합니다.)

그러나 TinyMCE가 텍스트 영역 컨트롤을 래핑 할 때 작동하지 않습니다. 현재이 텍스트 변경 이벤트를 구현하는 방법을보기 위해 소스와 플러그인을보고 있습니다.