Gli inserimenti di execCommand "insertHTML" di Chrome si estendono al di fuori del nodo quando il caret è al suo interno

Question

Il mio compito è inserire un nodo di span vuoto all'interno di un div ContentEditable alla posizione attuale del punto di inserimento.

Quanto segue non mi dà problemi su Firefox 22.0:

HTML

<div class="parent" contentEditable=true> 
    <div>text</div> 
</div> 

Javascript

$('.parent').on("keyup", function(e){ 
    if (e.which == 73) { 
     node = '<span class="new"></span>'; 
     document.execCommand('insertHtml', null, node); 
    } 
}); 

Per riprodurre: Posiziona il cursore a un certo punto della parola "testo", quindi premi il tasto "i" per inserire uno span vuoto alla selezione corrente.

See: http://jsfiddle.net/amirisnino/pZecx/2/

Esempio:

Quando si preme 'i' chiave nel mezzo della parola

Risultato atteso:

<div class="parent" contentEditable=true> 
    <div>tei<span class="new"></span>xt</div> 
</div> 

Wha succede invece?

<div class="parent" contentEditable=true> 
    <div>teixt</div> 
    <span class="new"></span> 
    <div><br></div> 
</div> 

di aiuto per questa sarebbe molto apprezzato. Grazie in anticipo.

Answer 1

Funziona?

$('.parent div').append(node); 

invece di questo:

document.execCommand('insertHtml', null, node); 

Answer 2

Si può fare l'attributo contenteditable dell'elemento arco come false. Per raggiungere le tue aspettative, devi spostare le ultime due righe al di fuori della condizione di if. Eccolo:

$('.parent').on("keyup", function(e){ 
    if (e.which == 73) { 
     node = '<span contenteditable="false" class="new"></span>'; 
     document.execCommand('insertHtml', null, node); 
     } 
     content = $(this).html() 
     $('.result').text(content) 

});