javascript - Chrome execCommand 'insertHTML' 当插入符号位于节点内部时，将跨度插入节点外部

Question

我的任务是在当前插入符号位置的 contentEditable div 中插入一个空的 span 节点。

以下内容在 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);
   }
});

重现：在单词“text”的某个点放置插入符号，然后按“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

您可以将 span 元素的 contenteditable 属性设置为 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

Does this work?

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

instead of this:

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