insertHTML在插入时，如果选择在节点内，则取消div

Question

在一个可满足内容的元素中，当execCommand被insertHTML命令调用时，如果选择是在一个节点命令中，则取消围绕插入的html段的div标签。

示例HTML代码块如下:

<div id="editable" contenteditable="true">
    <div>Some text</div>
    <div>Yet another</div>
    <div>and other</div>
</div>
<input id="insert" type="button" value="Insert Segment">

，让javascript按照如下方式处理插入

$('#insert').on('mousedown', function (e) { //that is to save selection on blur
    e.preventDefault(); 
}).on('click', function () { // this inserts the sample html segment
    document.execCommand('insertHTML', false, 
    '<div class="new-segment">Text inside Segment</div>');
});

在http://jsfiddle.net/TE4Y6/的实时示例遵循下面的场景:

• 将插入符号放在所有内容的末尾，按回车键创建新行，然后按"插入段"

result:新建div，背景为灰色，插入Text Inside Segment

• 将插入符号插入前三行中的任意一行，按"插入段"

result:它只插入不围绕div

的段的内容

期望:新div的灰色背景包含插入的"Text Inside Segment"

• 将插入符号放到前三行任意一行的末尾，按"插入段"

result:它只插入不围绕div

的段的内容

期望:新div的灰色背景包含插入的"Text Inside Segment"

• 将插入符号放在前三行任意一行的末尾，按回车键创建新行，然后按"插入段"

result:新建div，背景为灰色，插入Text Inside Segment

我已经尝试在插入段之前自动插入<br>，它修复了第三步，虽然插入冗余空间。

你有什么建议吗?

Answer 1

您可以尝试Range.insertNode。概念验证:http://jsfiddle.net/GYRLf/

var sel = window.getSelection();
if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    range.insertNode(yourDivElement);
}

这种方法的一个很大的缺点是它破坏了撤消。

---

乌利希期刊指南。我想我找到了一个解决方法:http://jsfiddle.net/2LCtd/

document.execCommand('insertHTML', false,
    '<div class="new-segment">' +
        '<h6 class="killme">' + html + '</h6>' +
     '</div>'
);
$('.killme').contents().unwrap();

当你在div中添加标题时，WebKit停止将div与周围环境合并。而且，由于文本内容在以后删除标题时不会改变，因此浏览器可以正确地撤消。

Answer 2

这似乎是Chromium的一个问题。您可以在https://code.google.com/p/chromium/issues/detail?id=122062