Maniglia posizione del cursore nel contenuto div modificabili

Question

ho questo contenuto div modificabile in HTML

<div contenteditable="true" id="TextOnlyPage"></div> 

Ed ecco il mio codice jQuery

var rxp = new RegExp("(([0-9]+\.?[0-9]+)|([0-9]+))", "gm"); 
$('#TextOnlyPage').keyup(function(e){ 
    if(e.keyCode == 13){ 
     e.preventDefault(); 
     $('#TextOnlyPage').children().each(function() { 
      if ($(this).is("div")) { 
       $(this).contents().unwrap(); 
      }}); 
     $('#TextOnlyPage').append("<br/>"); 
    } 
     $('#TextOnlyPage').children().contents().unwrap(); 
     var $this = $(this); 
     var content = $this.html(); 
     $this.html(content.replace(rxp, "<span class='highlight'>$1</span>"));}); 

problema è la posizione del cursore, perché quando si applica tag span intorno numeri nel metodo string.replace, quindi il cursore si sposta all'inizio del contenuto modificabile div. Inoltre non può andare alla riga successiva mentre premo il tasto invio.

So che posso gestirlo tramite gli oggetti range e selection, ma non riesco a trovare una risorsa utile per capire come funzionano questi oggetti.

Gentilmente fornirmi una soluzione per questo problema e sarà meglio se la soluzione in angularjs, o fornirmi una risorsa in cui posso comprendere gli oggetti di intervallo e selezione con esempi di lavoro.

Answer 1

Ecco alcune risorse da MDN: Selection e Range.

Ho creato questo JSFiddle to demonstrate re-positioning the caret.

Non funziona per tutti i casi (ad es. Per entrare, selezionare un intervallo con shift + freccia ...) ma dovrebbe già darti qualche idea.

Ecco un esempio da MDN sulla creazione delle selezioni:

/* Select all STRONG elements in an HTML document */ 

var strongs = document.getElementsByTagName("strong"); 
var s = window.getSelection(); 

if(s.rangeCount > 0) s.removeAllRanges(); 

for(var i = 0; i < strongs.length; i++) { 
    var range = document.createRange(); 
    range.selectNode(strongs[i]); 
    s.addRange(range); 
} 

Come sidenote, lavorando con contentEditable, si apre più problemi in futuro, io suggerisco di fare del tuo meglio per trovare alternative ad esso. Inoltre, assicurati di notare i limitati avvisi di supporto del browser nei link che ho fornito.

Answer 2

Ho affrontato lo stesso problema come avete fatto qualche tempo fa, per undertand come range e selection opere vi consiglio di dare un'occhiata a documenti MDN Selection e Range

Un modo affidabile per rilevare il cambiamento in un contentEditable div è l'evento input. Un problema che ho riscontrato durante l'elencazione per keyUp e l'impedimento del comportamento predefinito per alcuni keyCode è che sono molti di essi ed è molto difficile coprire tutti i casi d'uso.

Quello che preferisco fare è lasciare che l'evento normale venga elaborato, salvare la posizione del cursore, ottenere il valore del testo e sostituire le parti che devono essere evidenziate e quindi riportare la posizione del cursore.

Ecco un semplice esempio

var contentEditable = document.querySelector('div[contenteditable]'); 
contentEditable.addEventListener('input', onInput); 

var onInput = function(e) { 

    // this function will be called after the current call-stack 
    // is finished, at that time the user input will be inserted 
    // in the content editable 
    setTimeout(function() { 

     // save the caret position 

     var text = contentEditable.innerText; 
     // perform all your replacement on `text` 
     contentEditable.innerHTML = text; 

     // set the caret position back 
    }, 0); 
} 

Ho anche scritto due metodo pratico getCaretOffsetWithin e setCaretPositionWithin per contribuire a manipolare il cursore quando si desidera eseguire alcune manipolazione del DOM e riposizionare il punto di inserimento al suo valore iniziale dopo la in lavorazione.

È possibile controllare su questo succo contenteditable-utils.js