Javascript 如何将插入符号位置存储在可编辑的div中？

我打开了一个普通的文本区域，它以前存储了用户插入符号的位置，当他们重新打开我的Chrome扩展时返回了它。我现在将文本区域更改为可编辑的div，以启用基本文本格式，但插入符号位置存储不起作用

我目前有工作代码来存储插入符号的位置在一个文本区域，但我现在需要找出我需要改变它的工作在一个可编辑的div代替

(function($) {
$.fn.caret = function(pos) {
    var target = this[0];
    var isContentEditable = target.contentEditable === 'true';
    if (arguments.length == 0) {
        if (window.getSelection) {
            if (isContentEditable) {
                target.focus();
                var range1 = window.getSelection().getRangeAt(0),
                    range2 = range1.cloneRange();
                range2.selectNodeContents(target);
                range2.setEnd(range1.endContainer, range1.endOffset);
                return range2.toString().length;
            }
            return target.selectionStart;
        }
        if (document.selection) {
            target.focus();
            if (isContentEditable) {
                var range1 = document.selection.createRange(),
                    range2 = document.body.createTextRange();
                range2.moveToElementText(target);
                range2.setEndPoint('EndToEnd', range1);
                return range2.text.length;
            }
            var pos = 0,
                range = target.createTextRange(),
                range2 = document.selection.createRange().duplicate(),
                bookmark = range2.getBookmark();
            range.moveToBookmark(bookmark);
            while (range.moveStart('character', -1) !== 0) pos++;
            return pos;
        }
        return 0;
    }
    if (pos == -1)
        pos = this[isContentEditable ? 'text' : 'val']().length;
    if (window.getSelection) {
        if (isContentEditable) {
            target.focus();
            window.getSelection().collapse(target.firstChild, pos);
        } else
            target.setSelectionRange(pos, pos);
    } else if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(target);
        range.moveStart('character', pos);
        range.collapse(true);
        range.select();
    }
    if (!isContentEditable)
        target.focus();
    return pos;
}
})(jQuery)

---

看看这个片段（我在这里复制了他的小提琴）：

此代码侦听mouseup和keyup事件以重新计算插入符号的位置。您可以将其存储在这些点

函数getCaretCharacterOffsetWithin（元素）{ var caretofset=0； var doc=element.ownerDocument | | element.document； var win=doc.defaultView | | doc.parentWindow； var-sel； if（typeof win.getSelection！=“未定义”）{ sel=win.getSelection（）； 如果（选择范围计数>0）{ var range=win.getSelection（）.getRangeAt（0）； var precretange=range.cloneRange（）； 预重排列。选择节点内容（元素）； precretange.setEnd（range.endContainer，range.endOffset）； CareTofset=precretange.toString（）.length； } }如果（（选择=文件选择）&&sel.type！=“控制”）{ var textRange=sel.createRange（）； var precarteTextRange=doc.body.createTextRange（）； PrecretTextRange.moveToElementText（元素）； setEndPoint（“EndToEnd”，textRange）； CareTofset=PrecretTextRange.text.length； } 返回caretofset； } var lastCaretPos=10； 函数showCaretPos（）{ /*您可以在调用此函数时存储位置*/ var el=document.getElementById（“测试”）； lastCaretPos=getCaretCharacterOffsetWithin（el）； var caretPosEl=document.getElementById（“caretPos”）； caretPosEl.innerHTML=“插入位置：”+lastCaretPos； } 函数restorecarepos（）{ var节点=document.getElementById（“测试”）； node.focus（）； var textNode=node.firstChild； var range=document.createRange（）； range.setStart（textNode，lastCaretPos）； range.setEnd（textNode，lastCaretPos）； var sel=window.getSelection（）； 选择removeAllRanges（）； 选择添加范围（范围）； } document.getElementById（“test”）.onkeyup=showCaretPos； document.getElementById（“test”）.onmouseup=showCaretPos； document.getElementById（“按钮”）.onclick=restoreCarepos

这是一个可编辑的div
插入符号位置：10

这是一个有趣的问题，但我认为这无论如何都不是特定于扩展的。如果我关闭扩展，然后再返回到它，我将如何自动聚焦到div上，从而显示插入符号（在其存储位置闪烁）？@Athium看一看我更新的代码片段。我添加了一个恢复按钮。