javascript - 替换<div contenteditable ="true">的innerHTML时，修复光标位置

当在每次击键时innerHTML发生变化的<div id="richTextBox" contenteditable="true"></div>内部键入内容时，将光标保持在正确位置的最佳方法是什么？替换innerHTML的行为使光标位置困惑。
我更改innerHTML的原因是因为我添加了<span>标签。它是代码突出显示程序的一部分。 span标签使我可以放置正确的颜色高光。
目前，我正在使用来自StackOverflow答案的以下代码作为创可贴，但是它有一个重要的错误。如果您按下，请输入，光标将停留在旧点，或移至随机点。这是因为该算法从光标开始算起有多少个字符。但它不将HTML标记或换行符视为字符。并且richTextBox插入<br>进行输入。
解决方法:

修复以下代码？参见Fiddle

替换为更简单的代码？我尝试了一堆涉及window.getSelection()和document.createRange()的较简单的东西，但是我无法使其正常工作。

用没有此错误的richTextBox库或模块替换吗？

截屏

// Credit to Liam (Stack Overflow)
// https://stackoverflow.com/a/41034697/3480193
class Cursor {
  static getCurrentCursorPosition(parentElement) {
    var selection = window.getSelection(),
      charCount = -1,
      node;

    if (selection.focusNode) {
      if (Cursor._isChildOf(selection.focusNode, parentElement)) {
        node = selection.focusNode;
        charCount = selection.focusOffset;

        while (node) {
          if (node === parentElement) {
            break;
          }

          if (node.previousSibling) {
            node = node.previousSibling;
            charCount += node.textContent.length;
          } else {
            node = node.parentNode;
            if (node === null) {
              break;
            }
          }
        }
      }
    }

    return charCount;
  }

  static setCurrentCursorPosition(chars, element) {
    if (chars >= 0) {
      var selection = window.getSelection();

      let range = Cursor._createRange(element, { count: chars });

      if (range) {
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
  }

  static _createRange(node, chars, range) {
    if (!range) {
      range = document.createRange()
      range.selectNode(node);
      range.setStart(node, 0);
    }

    if (chars.count === 0) {
      range.setEnd(node, chars.count);
    } else if (node && chars.count >0) {
      if (node.nodeType === Node.TEXT_NODE) {
        if (node.textContent.length < chars.count) {
          chars.count -= node.textContent.length;
        } else {
          range.setEnd(node, chars.count);
          chars.count = 0;
        }
      } else {
        for (var lp = 0; lp < node.childNodes.length; lp++) {
          range = Cursor._createRange(node.childNodes[lp], chars, range);

          if (chars.count === 0) {
          break;
          }
        }
      }
    }

    return range;
  }

  static _isChildOf(node, parentElement) {
    while (node !== null) {
      if (node === parentElement) {
        return true;
      }
      node = node.parentNode;
    }

    return false;
  }
}

window.addEventListener('DOMContentLoaded', (e) => {
  let richText = document.getElementById('rich-text');

  richText.addEventListener('input', function(e) {
    let offset = Cursor.getCurrentCursorPosition(richText);
    // Pretend we do stuff with innerHTML here. The innerHTML will end up getting replaced with slightly changed code.
    let s = richText.innerHTML;
    richText.innerHTML = "";
    richText.innerHTML = s;
    Cursor.setCurrentCursorPosition(offset, richText);
    richText.focus(); // blinks the cursor
  });
});

body {
  margin: 1em;
}

#rich-text {
  width: 100%;
  height: 450px;
  border: 1px solid black;
  cursor: text;
  overflow: scroll;
  resize: both;
  /* in Chrome, must have display: inline-block for contenteditable=true to prevent it from adding <div> <p> and <span> when you type. */
  display: inline-block;
}

<p>
Click somewhere in the middle of line 1. Hit enter. Start typing. Cursor is in the wrong place.
</p>

<p>
Reset. Click somewhere in the middle of line 1. Hit enter. Hit enter again. Cursor goes to some random place.
</p>

<div id="rich-text" contenteditable="true">Testing 123<br />Testing 456</div>

    

浏览器
Google Chrome v83，Windows 7

最佳答案

问题似乎是，添加新行会添加<br>，但是由于您仍在父元素中，因此未考虑先前的DOM子级，并且selection.focusOffset仅提供了4的值。
在innerHtml的末尾添加一个换行符可能会有所帮助，因为在删除并重新添加它时会删除它。将+ "\n"放在 fiddle 上第100行的末尾即可。

但是，您的主要问题是，您从其他StackOverflow问题中复制的getCurrentCursorPosition实际上不起作用。
我建议您对这个问题进行其他一些回答:
Get contentEditable caret index position和console.log它们输出什么，并查看哪种最适合您的边缘情况。
如果您不想自己编写它，那么Caret.js(At.js编辑器库的一部分)将很有用。

关于javascript - 替换<div contenteditable ="true">的innerHTML时，修复光标位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62705449/