поддерживать позицию курсора в 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?

В принципе, я что-то похожее на новый редактор твит в твиттер писать. Внутри div с contentEditable включен, я разбираю текст. Когда я обнаруживаю, что я думаю, что это URL, я раздеться этим текстом, и введите в <a> тег внутри DIV (например, поступили сообщение о 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