Question

我正在使用一个contenteditable div，它可以选择在文本流中使用内联html元素，例如标记。

在某些时候我需要抓住插入位置，但是发现如果插入符号位于html子元素之后，使用示例代码返回的位置是不正确的。

我需要一个跨浏览器的解决方案，它允许我存储插入符的位置，以便即使文本流中存在html元素，也可以在一瞬间恢复它。 < / p>

Answer 1

我在这里回答了一个非常相似的问题：Editing Iframe Content in IE - problem in maintaining text selection

以下是该答案的略微简化版本：

如果您没有更改contenteditable元素的内容，则以下功能将执行。在做任何你需要做的事情之前调用saveSelection()然后再restoreSelection()。如果您要更改内容，我建议您使用我的Rangy图书馆save/restore selection module。

var saveSelection, restoreSelection;
if (window.getSelection) {
    // IE 9 and non-IE
    saveSelection = function() {
        var sel = window.getSelection(), ranges = [];
        if (sel.rangeCount) {
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
        }
        return ranges;
    };

    restoreSelection = function(savedSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        for (var i = 0, len = savedSelection.length; i < len; ++i) {
            sel.addRange(savedSelection[i]);
        }
    };
} else if (document.selection && document.selection.createRange) {
    // IE <= 8
    saveSelection = function() {
        var sel = document.selection;
        return (sel.type != "None") ? sel.createRange() : null;
    };

    restoreSelection = function(savedSelection) {
        if (savedSelection) {
            savedSelection.select();
        }
    };
}

使用示例：

var sel = saveSelection();
// Do stuff here
restoreSelection(sel);

Answer 2

我发布了一个关于跨浏览器范围/选择库的问题，发现了一些我能够解决所有需求的好东西。

这是我的帖子： Cross Browser Selection Range Library?

最有帮助的是Tim Down的rangy。

如何使用html子元素在contenteditable div中获得插入位置？

2 个答案: