contenteditable容器中的内容重新赋值之后 光标位置还原

在contenteditable容器中，重新赋值后光标位置会丢失，需要手动将光标位置还原到之前的位置。可以通过以下步骤实现：

1. 首先，获取要设置光标位置的父容器，例如一个div元素，可以使用如下代码获取：

   var container = document.getElementById("container");

2. 然后，获取之前保存的光标位置，可以使用如下代码获取：

   var savedSelection = saveSelection(container);

这里用到了一个名为saveSelection的函数，这个函数的作用是保存当前光标位置。可以使用以下代码实现：

   function saveSelection(containerEl) {
       var sel = window.getSelection();
       var range = sel.getRangeAt(0);
       var preSelectionRange = range.cloneRange();
       preSelectionRange.selectNodeContents(containerEl);
       preSelectionRange.setEnd(range.startContainer, range.startOffset);
       var start = preSelectionRange.toString().length;

       return {
           start: start,
           end: start + range.toString().length
       };
   }

这个函数的返回值是一个对象，包含两个属性：start和end，表示光标的起始位置和结束位置。

3. 接下来，重新设置容器的内容，可以使用如下代码设置：

   container.innerHTML = "重新设置的内容";

4. 最后，将光标位置还原到之前保存的位置，可以使用如下代码还原：

   restoreSelection(container, savedSelection);

这里用到了一个名为restoreSelection的函数，这个函数的作用是将光标位置还原到指定位置。可以使用以下代码实现：

   function restoreSelection(containerEl, savedSel) {
       var charIndex = 0, range = document.createRange();
       range.setStart(containerEl, 0);
       range.collapse(true);
       var nodeStack = [containerEl], node, foundStart = false, stop = false;

       while (!stop && (node = nodeStack.pop())) {
           if (node.nodeType == 3) {
               var nextCharIndex = charIndex + node.length;
               if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                   range.setStart(node, savedSel.start - charIndex);
                   foundStart = true;
               }
               if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                   range.setEnd(node, savedSel.end - charIndex);
                   stop = true;
               }
               charIndex = nextCharIndex;
           } else {
               var i = node.childNodes.length;
               while (i--) {
                   nodeStack.push(node.childNodes[i]);
               }
           }
       }

       var sel = window.getSelection();
       sel.removeAllRanges();
       sel.addRange(range);
   }

完整的代码示例：

var container = document.getElementById("container");
var savedSelection = saveSelection(container);
container.innerHTML = "重新设置的内容";
restoreSelection(container, savedSelection);

function saveSelection(containerEl) {
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(containerEl);
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    var start = preSelectionRange.toString().length;

    return {
        start: start,
        end: start + range.toString().length
    };
}

function restoreSelection(containerEl, savedSel) {
    var charIndex = 0, range = document.createRange();
    range.setStart(containerEl, 0);
    range.collapse(true);
    var nodeStack = [containerEl], node, foundStart = false, stop = false;

    while (!stop && (node = nodeStack.pop())) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                range.setEnd(node, savedSel.end - charIndex);
                stop = true;
            }
            charIndex = nextCharIndex;
        } else {
            var i = node.childNodes.length;
            while (i--) {
                nodeStack.push(node.childNodes[i]);
            }
        }
    }

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}