Chrome execCommand 'chènHTML' chèn khoảng cách bên ngoài nút khi dấu mũ bên trong nó

Question

Nhiệm vụ của tôi là chèn một nút nhịp trống trong div nội dung có thể chỉnh sửa ở vị trí dấu nháy hiện tại.

Sau đây mang lại cho tôi không có vấn đề trên 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); 
    } 
}); 

Để tái sản xuất: Đặt dấu mũ tại một số điểm của từ 'văn bản', sau đó nhấn phím 'i' để chèn khoảng trống vào lựa chọn hiện tại.

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

Ví dụ:

Khi nhấn 'i' chìa khóa ở giữa của từ

Kết quả mong đợi:

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

Wha t xảy ra thay thế?

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

Bất kỳ trợ giúp nào về điều này sẽ được đánh giá cao. Cảm ơn bạn trước.

Answer 1

Tính năng này có hoạt động không?

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

thay vì điều này:

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

Answer 2

Bạn có thể làm cho các thuộc tính của phần tử span contenteditable như sai. Để đạt được kỳ vọng của bạn, bạn phải di chuyển hai dòng cuối cùng bên ngoài if-condition. Dưới đây là:

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

});