Chrome execCommand 'insertHTML' wstawia span poza węzeł, gdy znajduje się w nim kreska

Question

Moje zadanie polega na wstawieniu pustego węzła zakresu w div div contentEditable w aktualnej pozycji caret.

Poniżej przedstawiono mi żadnych problemów na Firefox 22.0:

HTML

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

obsługa JavaScript

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

Aby odtworzyć: Umieść kursor w pewnym miejscu słowa "tekst", a następnie naciśnij klawisz "i", aby wstawić pusty zakres przy bieżącym wyborze.

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

Przykład:

Kiedy naciśnięcie klawisza 'I' w środku wyrazu

Oczekiwany wynik:

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

Wha t dzieje się zamiast tego?

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

Każda pomoc z tym byłoby bardzo mile widziane. Z góry dziękuję.

Answer 1

Czy to działa?

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

zamiast tego:

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

Answer 2

Można dokonać contenteditable atrybut elementu przęsła jako fałszywe. Aby spełnić twoje oczekiwania, musisz przenieść ostatnie dwie linie poza warunek if. Oto ona:

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

});