contenteditable div：IE8不满意退格删除HTML元素 [英] contenteditable div: IE8 not happy with backspace remove of HTML element

问题描述

我正在使用contenteditable div与 rangy Javascript库结合使用，在光标位置插入HTML 。

I am making use of a contenteditable div in combination with the rangy Javascript library to insert HTML at the cursor position.

div的内容通常如下所示：

End of the day the contents of the div commonly looks like:

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

按@后会建议用户，然后在选中时将其作为按钮插入（ala Google Plus ）。我还在此按钮后插入& nbsp; 。

Users get suggested upon pressing '@' and get subsequently inserted as a button when selected (ala Google Plus). I also insert a   after this button.

Chrome / Safari / Firefox中的按钮被删除当您点击退格键（首先删除& nbsp; 之后），但不是在IE8中。在IE8中，光标只是跳过按钮而不删除它。 IE8中更奇怪的是，如果你离开按钮旁边的& nbsp; - 而是将光标放在按钮旁边 - 它会移除退格键上的按钮。因此，当光标右侧有& nbsp; 时，它很高兴。

The button gets removed in Chrome/Safari/Firefox when you hit backspace (after first removing the  ), but not in IE8. In IE8 the cursor merely jumps over the button without removing it. What's even more bizarre in IE8 is if you leave the   next to the button - and rather place the cursor right next to the button - it removes the button on backspace. So it's happy when there's a   to the right of the cursor.

有没有人知道我需要什么才能使IE8工作i.t.o.在退格时删除按钮而不需要光标右侧的& nbsp; ？ （关于这种奇怪行为的一些信息也可能有帮助）

Does anyone know what I need in order to make IE8 work i.t.o. removing the button upon backspace without the need for a   to the right of the cursor? (some info on this strange behaviour might also help)

P.S。我还没有测试其他版本的IE

P.S. I haven't tested other versions of IE

推荐答案

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

My suggestion would be to first check the caret is positioned after the non-editable node, and if so, create a range that starts immediately after the non-editable element and ends at the caret position. Check whether the text in this range is empty. If it is, that means the caret is placed directly after the non-editable element, so in that case remove the element. Finally, place the caret where the non-editable had been.

现场演示： 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;
    }
};

这篇关于contenteditable div：IE8不满意退格删除HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！