javascript - キャレットがノード内にある場合、Chrome execCommand 'insertHTML' はノードの外側にスパンを挿入します

Question

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

以下は、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);
   }
});

再現するには:「テキスト」という単語のどこかにキャレットを置き、「i」キーを押して、現在の選択範囲に空のスパンを挿入します。

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

例：

単語の途中で「i」キーを押すと

期待される結果：

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

代わりに何が起こりますか？

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