javascript - 保存和恢复 contentEditable div 的插入符号位置

Question

我有一个contentEditable div，它的innerHTML 可以在编辑时通过AJAX 更新。问题是，当您更改 div 的内容时，它会将光标移动到 div 的末尾(或失去焦点，具体取决于浏览器)。在更改 innerHTML 之前存储插入符位置然后恢复它的跨浏览器解决方案是什么？

Answer 1

回到2016年:)
在我遇到这里的解决方案之后，它们并不适合我，因为每次输入后我的 DOM 都被完全替换了。我做了更多研究，并提供了一个简单的解决方案，该解决方案按 Angular 色的位置保存光标，这对我来说完美。

这个想法很简单。

1. 找出插入符前字符的长度并保存。
2. 更改 DOM。
3. 使用 TreeWalker 仅在 context node 的 text nodes 上行走并计算字符数，直到我们得到正确的 text node 和里面的位置

两种边缘情况:

1. 内容完全删除，因此没有文本节点:
   so:将光标移动到上下文节点的开头

2. 内容比index指向的少:
   so:将光标移动到最后一个节点的末尾

function saveCaretPosition(context){
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    range.setStart(  context, 0 );
    var len = range.toString().length;

    return function restore(){
        var pos = getTextNodeAtPosition(context, len);
        selection.removeAllRanges();
        var range = new Range();
        range.setStart(pos.node ,pos.position);
        selection.addRange(range);

    }
}

function getTextNodeAtPosition(root, index){
    const NODE_TYPE = NodeFilter.SHOW_TEXT;
    var treeWalker = document.createTreeWalker(root, NODE_TYPE, function next(elem) {
        if(index > elem.textContent.length){
            index -= elem.textContent.length;
            return NodeFilter.FILTER_REJECT
        }
        return NodeFilter.FILTER_ACCEPT;
    });
    var c = treeWalker.nextNode();
    return {
        node: c? c: root,
        position: index
    };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
<link href="https://rawgit.com/PrismJS/prism/gh-pages/themes/prism.css" rel="stylesheet"/>
<style>
  *{
    outline: none
    }
</style>  
<h3>Edit the CSS Snippet </H3>
<pre>
    <code class="language-css" contenteditable=true >p { color: red }</code>
</pre>

<script >
  var code = document.getElementsByTagName('code')[0];
  
  code.addEventListener('input',function () {
        var restore = saveCaretPosition(this);
        Prism.highlightElement(this);
        restore();
    })
</script>