2

在 contenteditable 元素中，当使用命令 insertHTML 调用 execCommand 时，如果选择位于节点内，命令将展开插入的 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/上的实时示例遵循以下场景：

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

结果：带有灰色背景的新 div 包含插入的“文本段内”

  • 将插入符号放在前三行中的任何一个内部，按“插入段”

结果：它只插入不包围 div 的段的内容

预期：灰色背景的新 div 包含插入的“文本段内”

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

结果：它只插入不包围 div 的段的内容

预期：灰色背景的新 div 包含插入的“文本段内”

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

结果：带有灰色背景的新 div 包含插入的“文本段内”

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

你有什么建议吗？

4

2 回答 2

2

You can try Range.insertNode. Proof of concept: http://jsfiddle.net/GYRLf/

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

A big disadvantage of this approach is that it breaks undo.

UPD. I think I found a workaround: http://jsfiddle.net/2LCtd/

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

When you add a header inside the div WebKit stops merging the div with surroundings. And because the text content doesn't change when you later remove the header, the browser can undo correctly.

于 2013-04-16T10:04:11.103 回答
1

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

于 2013-07-09T15:44:29.417 回答