当插入符号时,Chrome execCommand'insertHTML'会插入节点外部

时间:2013-07-09 15:09:23

标签: javascript html google-chrome execcommand inserthtml

我的任务是在当前插入位置的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>

对此的任何帮助将不胜感激。提前谢谢。

2 个答案:

答案 0 :(得分:2)

您可以将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)

});

答案 1 :(得分:0)

这有用吗?

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

而不是:

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