javascript – contenteditable div：IE8对退格HTML元素不满意

我正在使用一个contenteditable div与 rangy Javascript库结合,在光标位置插入HTML.

div的内容通常如下所示：

<div contenteditable="true">
    "Hello "
    <button contenteditable="false" data-id="147">@John Smith</button>
    " "
</div>

按“@”后会建议用户,然后在选中时将其作为按钮插入(ala Google Plus).我还插入了& nbsp;在这个按钮之后.

当您按下退格键(首先删除& nbsp;之后)时,Chrome / Safari / Firefox中的按钮会被删除,但不会在IE8中删除.在IE8中,光标只是跳过按钮而不删除它. IE8中更奇怪的是,如果你离开& nbsp;按钮旁边 – 而是将光标放在按钮旁边 – 它会删除退格键上的按钮.所以当有一个& nbsp;在光标的右侧.

有谁知道我需要什么才能使IE8工作i.t.o.在退格时移除按钮而无需使用& nbsp;在光标的右边？ (关于这种奇怪行为的一些信息也可能有帮助)

附：我还没有测试过其他版本的IE

解决方法

我的建议是首先检查插入符号位于不可编辑节点之后,如果是,则创建一个在不可编辑元素之后立即开始并在插入符号位置结束的范围.检查此范围内的文本是否为空.如果是,则表示插入符号直接放在不可编辑的元素之后,因此在这种情况下删除该元素.最后,将插入符号放在不可编辑的位置.

现场演示：http://jsfiddle.net/timdown/vu3ub/

码：

document.onkeypress = function(e) {
    e = e || window.event;
    var keyCode = e.which || e.keyCode;
    if (keyCode !== 8) {
        return;
    }

    var sel = rangy.getSelection();
    if (sel.rangeCount === 0) {
        return;
    }

    var selRange = sel.getRangeAt(0);
    if (!selRange.collapsed) {
        return;
    }

    var nonEditable = document.getElementById("nonEditable");
    if (!nonEditable) {
        return;
    }

    // Check the caret is located after the non-editable element
    var range = rangy.createrange();
    range.collapseAfter(nonEditable);

    if (selRange.compareBoundaryPoints(range.START_TO_END,range) == -1) {
        return;
    }

    // Check whether there is any text between the caret and the
    // non-editable element. If not,delete the element and move
    // the caret to where it had been
    range.setEnd(selRange.startContainer,selRange.startOffset);
    if (range.toString() === "") {
        selRange.collapseBefore(nonEditable);
        nonEditable.parentNode.removeChild(nonEditable);
        sel.setSingleRange(selRange);

        // Prevent the default browser behavIoUr
        return false;
    }
};