保持CONTENTEDITABLE DIV

Question

首先的光標位置，這類似於這些：

Editing Iframe Content in IE - problem in maintaining text selection

How to get caret position within contenteditable div with html child elements?

基本上，我正在寫類似於Twitter的新的鳴叫編輯器的東西。在div的內部設置contentEditable，我正在解析文本。當我發現我認爲是一個URL，我剝文本並進入格內的<a>標記（go to www.google.com如輸入的消息成爲Go to <a href='..'>www.google.com</a>。但是，當我這樣做，插入符位置將丟失。

使用@ Tim-Down在其他SO帖子中的建議只有在你不編輯DOM時纔會起作用（正如他所說的那樣）我正在編輯DOM，所以插入符的位置丟失了

是這樣嗎？可能的（理想情況下，不使用參考Rangy庫）通過在當前代碼上工作來實現此目的。

我現在擁有的代碼（來自其他SO帖子）：

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

    restoreSelection = function(win, savedSelection) { 
     var sel = win.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(win) { 
     var sel = win.document.selection; 
     return (sel.type != "None") ? sel.createRange() : null; 
    }; 

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

我用它是這樣的：

$('div').on('keyup paste', function(e) { 
    var ranges = saveSelection(window); 
    var newContent = /* Get the new HTML content */; 
    $('div').html(newContent); 
    restoreSelection(window, ranges); 
}); 

Answer 1

如果用戶看到的文本保持不變（這你的問題似乎暗示是這樣），你可以使用一個字符偏移爲主解。我已經發布了一些代碼堆棧溢出其他地方：

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

我也回答了相關的問題最近比較：

jQuery: Convert text URL to link as typing