在可信的div中保持光标位置

Question

首先,这类似于:

在IE中编辑iframe内容 - 维护文本选择的问题

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

基本上,我正在写一些类似于推特中的新推文编辑器.里面div有contentEditable设置,我解析的文字.当我发现我认为是URL的时候,我将该文本删除并输入<a>div内的标签(例如输入的信息go to www.google.com变为Go to <a href='..'>www.google.com</a>.但是,当我这样做时,插入位置会丢失.

使用@Tim-Down在其他SO帖子中的建议只有在您不编辑DOM时才会起作用(正如他所说).我正在编辑DOM,因此插入位置丢失了.

是否有可能(理想情况下不使用引用的Rangy库)通过处理当前代码来实现这一点.

我目前的代码(来自其他SO帖子):

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

    restoreSelection = function(win, savedSelection) {
        var sel = win.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(win) {
        var sel = win.document.selection;
        return (sel.type != "None") ? sel.createRange() : null;
    };

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

我这样使用它:

$('div').on('keyup paste', function(e) {
    var ranges = saveSelection(window);
    var newContent = /* Get the new HTML content */;
    $('div').html(newContent);
    restoreSelection(window, ranges);
});

Answer 1

如果用户看到的文本保持不变（您的问题似乎暗示是这种情况），您可以使用基于字符偏移的解决方案。我已经在 Stack Overflow 的其他地方发布了一些代码：

/sf/answers/976526351/

我最近也回答了一个相关的问题：

jQuery：在键入时将文本 URL 转换为链接