Chrome execCommand 'insertHTML', karet içinde olduğunda düğümün dışına ekler ekler

Question

Görevim, o anki düzeltme konumunda bir contentEditable div içine boş bir span düğümü eklemektir. yeniden oluşturmak için

<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); 
    } 
}); 

HTML:

şu bana Firefox 22.0 üzerinde herhangi bir sorun verir "Metin" kelimesinin bir noktasını işaretleyin ve geçerli seçime boş bir alan eklemek için 'i' tuşuna basın.

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

Örnek:

kelimenin ortasında 'i' tuşuna basarak

Beklenen sonuç:

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

Wha Bunun yerine t olur?

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

bununla Herhangi bir yardım büyük takdir. Şimdiden teşekkür ederim.

Answer 1

Bu işe yarar mı? Bu yerine

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

:

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

Answer 2

Sen yanlış olarak yayılma elemanının contenteditable niteliğini yapabilirsiniz. Beklentinize ulaşmak için, son iki satırı if-condition'in dışına taşımalısınız. İşte burada:

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

});