HTML 자식 요소가있는 contenteditable div 내에서 캐럿 위치를 얻는 방법은 무엇입니까?

Question

나는 텍스트 플로우의 태그와 같은 인라인 HTML 요소를 가질 수있는 옵션이있는 contenteditable div로 작업하고있다.

어떤 점에서 나는 캐럿 위치를 잡아야하지만, 캐럿이 html 자식 요소 뒤에있는 경우 예제 코드에서 반환 된 위치가 올바르지 않다는 것을 알았습니다.

텍스트 흐름에서 html 요소가있는 경우에도 나중에 초 단위로 복원 할 수 있도록 캐럿의 위치를 ​​저장할 수있는 크로스 브라우저 솔루션이 필요합니다.

예 : http://jsfiddle.net/wPYMR/2/

Answer 1

나는 크로스 브라우저 범위/선택 라이브러리에 대한 질문을 게시하고 내가 가진 모든 내 요구를 해결할 수 있었다 멋진 물건을 발견했다. 나를 가장 도움이 무엇 Cross Browser Selection Range Library?

이 팀 다운 rangy했다 :

여기 내 게시물입니다.

내가 여기에 매우 비슷한 질문 대답했습니다

Answer 2

: 여기 Editing Iframe Content in IE - problem in maintaining text selection

그 대답의 약간 단순화 된 버전 : 당신은 다음의 contentEditable 요소의 내용을 변경하지 않는 경우

다음과 같은 기능을 할 것을 . 필요한 모든 작업을 수행하기 전에 saveSelection()으로 전화하십시오. 나중에 restoreSelection()을 호출하십시오. 콘텐츠를 변경하는 경우 내 Rangy 라이브러리 save/restore selection module을 사용하시기 바랍니다.

var saveSelection, restoreSelection; 
if (window.getSelection) { 
    // IE 9 and non-IE 
    saveSelection = function() { 
     var sel = window.getSelection(), ranges = []; 
     if (sel.rangeCount) { 
      for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
       ranges.push(sel.getRangeAt(i)); 
      } 
     } 
     return ranges; 
    }; 

    restoreSelection = function(savedSelection) { 
     var sel = window.getSelection(); 
     sel.removeAllRanges(); 
     for (var i = 0, len = savedSelection.length; i < len; ++i) { 
      sel.addRange(savedSelection[i]); 
     } 
    }; 
} else if (document.selection && document.selection.createRange) { 
    // IE <= 8 
    saveSelection = function() { 
     var sel = document.selection; 
     return (sel.type != "None") ? sel.createRange() : null; 
    }; 

    restoreSelection = function(savedSelection) { 
     if (savedSelection) { 
      savedSelection.select(); 
     } 
    }; 
} 

사용 예 :

var sel = saveSelection(); 
// Do stuff here 
restoreSelection(sel);