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

重现:将插入符放在“文本”一词的某个位置，然后按“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)

});