Chrome execCommand 'insertHTML' вставляет область за пределы узла, когда внутри него находится курсор

Question

Моя задача - вставить пустой узел span в div contentEditable в текущей позиции каретки.

Следующее не дает мне проблем с 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

Вы можете сделать атрибут contenteditable элемента span равным false. Чтобы оправдать ваши ожидания, вы должны переместить две последние строки за пределы условия if. Вот:

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

});

Answer 2

Это работает?

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

вместо этого:

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