如何使用html子元素在contenteditable div中獲取插入符的位置？

Question

我正在使用一個可以自由選擇div的選項，可以選擇在文本流中使用內嵌html元素（如標記）。

在某些時候，我需要抓住插入符的位置，但發現使用示例代碼返回的位置是不正確的，如果插入符在HTML子元素之後。

我需要一個跨瀏覽器解決方案，它允許我存儲脫字符的位置，以便在文本流中存在html元素之後可以在一秒之後恢復它。

例子：http://jsfiddle.net/wPYMR/2/

Answer 1

我發佈了關於跨瀏覽器範圍/選擇庫問題，並發現了一些偉大的東西是我能解決我的所有需求。

這是帖子： Cross Browser Selection Range Library?

什麼幫助了我最好的是蒂姆·唐氏​​。

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);