contentEditable div에서 jquery를 사용하여 붙여 넣기 이벤트 살생하기

Question

contentEditable div에서 붙여 넣기 작업을 위생화하려고합니다. '나는 사이트에 적합한 방법으로 붙여 넣은 텍스트 다시 포맷 그것을 통해 분석 할 수있을 것입니다,하지만 난 돈, 이상적으로

$('#content').bind('paste',function(e) 
{ 
    // Ensure pasted markup is valid 
}); 

: 즉, 코드는 다음과 같이 보일 것이다이며, 이 일을하는 법을 알지 못합니다.

또는 HTML 대신 일반 텍스트로 붙여 넣기가 쉬울 수도 있지만이 방법도 잘 모릅니다.

상자에 텍스트 영역이있는 팝업 솔루션을 사용하는 경우 사용자가이 텍스트 영역에 붙여 넣은 다음 텍스트를 이전 커서 위치의 내용에 넣으라는 해결책이 약간 익숙하지 않습니다. 나는 이것을하는 법을 알고 있지만 그것을 피하고 싶다.

그리고 저는 사용자가 e.preventDefault()을 사용하여 붙여 넣기하는 것을 완전히 막는 것에 불편합니다.

미리 감사드립니다.

Answer 1

DOM에 들어가기 전에 붙여 넣은 콘텐츠에 대부분의 브라우저가 직접 액세스 할 수있는 방법은 없습니다. 그러나 이것을하기위한 상당히 정교한 방법이 있는데, 이는 키보드에 의해 작동되는 페이스트에서만 작동합니다. 내 대답은 여기를 참조하십시오 :이 분야에서 몇 가지 방법을 이미 한 번

JavaScript get clipboard data on paste event (Cross browser)

Answer 2

당신이 내용을 확인할 수 없습니다? 내용을 붙여 넣고 원래 내용을 먼저 저장하고 새 내용이 유효하지 않으면 이전 내용으로 다시 바꿉니다. 그것은 단지 이론 일 뿐이며 지금은 실험을해야 할 것입니다.

Answer 3

나는이 자바 스크립트 라이브러리를 사용하여 컨텐츠를 살균 한 후 캐럿 위치를 저장하고 복원 할 수있었습니다.

https://github.com/timdown/rangy

크롬과 사파리에서 테스트.

$("#content").on('paste', function(){ 
    sanitize(); 
}); 

function sanitize(){ 
    setTimeout(function(){ 

     var savedSelection = rangy.saveSelection(); 

     $("#content *").removeAttr("style"); // Do your parsing here. 

     rangy.restoreSelection(savedSelection);   

    }, 0); 
} 

의