Question

在contenteditable元素中，当使用命令insertHTML调用execCommand时，如果选择在node命令中，则在插入的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/的实例示例请按照以下方案进行操作：

将插入符号放在所有内容的末尾，按Enter键创建一个新行，然后按“插入段”

结果：带有灰色背景的新div包含“Text Inside Segment”插入

将插入符号放在前三行的内部，按“插入段”

结果：它只插入不包围div

的段的内容

预期：带有灰色背景的新div包含“Text Inside Segment”插入

将插入符号放在前三行中任意一行的末尾，按“插入段”

结果：它只插入不包围div

的段的内容

预期：带有灰色背景的新div包含“Text Inside Segment”插入

将插入符号放在前三行中任意一行的末尾，按Enter键创建一个新行，然后按“插入段”

结果：带有灰色背景的新div包含“Text Inside Segment”插入

我尝试在插入段之前自动插入<br>它修复了第3步，但插入了冗余空间。

你有什么建议吗？

Answer 1

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

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

这种方法的一大缺点是它会破坏撤销。

UPD。我想我找到了一个解决方法：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

上关注此问题

当选择在节点内时，insertHTML在插入时展开div

2 个答案: