Rangy 라이브러리가 Opera에서 contenteditable과 함께 작동하지 않는 이유는 무엇입니까?

Question

콘텐츠 편집 가능 DIV 안에 인기있는 Rangy library을 사용하고 있습니다. 내 코드는 매우 간단합니다.

var saved_selection = false; 

$('#contenteditable').bind('keypress mouseup', function(e){ 
    $(this).find('.rangySelectionBoundary').remove(); 
    saved_selection = rangy.saveSelection(); 
});​ 

이제 Chrome과 FF에서 잘 작동합니다. 그러나 오페라에서는 매우 이상하게 작동합니다. contenteditable에 문자를 삽입 할 수 없기 때문에 포커스가 느슨해 지거나 적어도 그렇게 보입니다.

테스트 용 jsFiddle을 준비했습니다. 오페라에서는 편집 가능한 DIV에 문자를 입력 할 수 없습니다. http://jsfiddle.net/twST6/1/

아무도 내 문제를 설명하고 해결할 수 있습니까? Opera에서이 코드를 작동시키는 방법은 무엇입니까?

미리 도움을 청하십시오.

Answer 1

흥미 롭습니다. 문제는 Opera에서 키 누르기 이벤트 중에 DOM을 변경하면 네이티브 브라우저 키 누르기 동작이 멈추는 것입니다 (이전에 본 것 같음). 모든 키 누르기에서 선택 사항을 저장하는 것을 피하는 것에서 벗어나는 쉬운 방법은 없습니다. 또 다른 해결책은 선택 영역을 콘텐츠 내에서 문자 색인으로 저장하는 것으로 DOM을 변경하지 않으므로 작동해야합니다.

https://stackoverflow.com/a/5596688/96100

나는 또한보다 강력한 문자 인덱스 기반의 선택/저장 배회에 대한 복원 방출에 가까운 해요 :이 답변을 참조하십시오. 데모 여기를 참조하십시오 :

http://rangy.googlecode.com/svn/trunk/demos/textrange.html

배회의 선택 마커를 제거하기위한

덧붙여,이 내장되어 방법 :

rangy.removeMarkers(saved_selection);