Mantenere la posizione del cursore in div contenteditable

Question

Prima di tutto, questo è simile a questi:

Editing Iframe Content in IE - problem in maintaining text selection

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

In sostanza, sto scrivendo qualcosa di simile al nuovo editor di Tweet in twitter. All'interno di un div con contentEditable impostato su, sto analizzando il testo. Quando rilevo quello che penso è un URL, mi striscia che il testo fuori ed entrare in un <a> tag all'interno del div (messaggio ad esempio, è entrato di go to www.google.com diventa Go to <a href='..'>www.google.com</a>. MA, la posizione del cursore viene persa quando lo faccio.

Utilizzando il suggerimento di @ Tim-Down in questi altri messaggi SO funzionerà solo finché non modifichi il DOM (come dice lui) .Io sto modificando il DOM, quindi la posizione del punto di omissione è persa.

possibile (idealmente senza utilizzare la libreria Rangy di riferimento) per ottenere ciò lavorando sul codice corrente

Il codice che ho al momento (dagli altri post 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(); 
     } 
    }; 
} 

e lo uso come questo:

$('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

Se il testo l'utente vede rimane lo stesso (che la tua domanda sembra implicare è il caso), è possibile utilizzare un carattere a base di compensato soluzione. Ho postato un po 'di codice per che altrove su Stack Overflow:

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

ho anche risposto a una domanda relativa a poco tempo fa:

jQuery: Convert text URL to link as typing