Chrome execCommand 'insertHTML'は、キャレットが内部にあるときにノードの外側にスパンを挿入します。

Question

私の仕事は、現在のキャレット位置のcontentEditable div内に空のスパンノードを挿入することです。再現するために

<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：：

以下は私のFirefox 22.0には何の問題を与えない単語 'text'のある点にキャレットを置き、 'i'キーを押すと、現在の選択範囲に空のスパンが挿入されます。

参照：http://jsfiddle.net/amirisnino/pZecx/2/

例：

単語の途中で 'I' キーを押し

期待される結果：

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

義和代わりにtは起こる？

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

これで任意の助けいただければ幸いです。前もって感謝します。

Answer 1

これは機能しますか？これに代えて

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

：

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

Answer 2

あなたは偽としてspan要素の属性contenteditableを作ることができます。あなたの期待を達成するためには、if-conditionの外側の最後の2行を移動する必要があります。ここにあります：

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

});