javascript - 修复 的 innerHTML 时的光标位置

Question

在 <div id="richTextBox" contenteditable="true"></div> 中键入时，如何将光标保持在正确的位置，该 <span> 的 innerHTML 在每次击键时都会发生变化？替换 innerHTML 的行为会弄乱光标位置。
我更改 innerHTML 的原因是我添加了 <br> 标记。它是代码高亮程序的一部分。跨度标签允许我放置正确的颜色亮点。
我目前正在使用 StackOverflow 答案中的以下代码作为创可贴，但它有一个重大错误。如果您点击 输入 ，光标将停留在旧位置，或转到随机位置。那是因为算法从光标开始计算了多少个字符。但它不会将 HTML 标记或换行符算作字符。并且richTextBox 插入window.getSelection() 进行输入。
修复思路:

修复以下代码？见Fiddle

用更简单的代码替换？我尝试了一堆涉及 document.createRange() 和 ojit_code 的更简单的东西，但我无法让它工作。

替换成没有这个bug的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>

浏览器
谷歌浏览器 v83，Windows 7

Answer 1

问题似乎是添加新行会添加 <br> ，但是由于您仍在父元素中，因此不考虑以前的 DOM 子元素，并且 selection.focusOffset只给出 4 的值.
在 innerHtml 末尾添加换行符可能会有所帮助。 ，因为当您删除并重新添加它时它会被剥离。 + "\n"到 Fiddle 第 100 行的末尾就可以了。

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