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

Question

<div id="richTextBox" contenteditable="true"></div>在每次击键时其innerHTML 更改的内部键入时，将光标保持在正确位置的最佳方法是什么？替换innerHTML 的行为弄乱了光标位置。

我更改innerHTML 的原因是因为我添加了<span>标签。它是代码高亮程序的一部分。跨度标签允许我放置正确的颜色亮点。

我目前正在使用 StackOverflow 答案中的以下代码作为创可贴，但它有一个重大错误。如果您按Enter 键，光标会停留在旧位置，或移动到随机位置。那是因为该算法从光标开始计算了多少个字符。但它不会将 HTML 标签或换行符视为字符。并且 RichTextBox 插入<br>以进行输入。

修复思路：

• 修复下面的代码？见小提琴
• 替换为更简单的代码？我尝试了一堆涉及window.getSelection()and的更简单的东西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>

    

浏览器

谷歌浏览器 v83，Windows 7

Answer 1

问题似乎是添加新行会添加<br>，但由于您仍在父元素中，因此不会考虑之前的 DOM 子元素，并且仅selection.focusOffset给出 的值4。

在 的末尾添加换行符可能会有所帮助innerHtml，因为当您删除并重新添加它时，它会被删除。+ "\n"到 Fiddle 上第 100 行的末尾就可以了。

不过，您的主要问题是getCurrentCursorPosition您从其他 StackOverflow 问题复制的内容实际上不起作用。

我建议您浏览此问题的一些其他答案： 获取 contentEditable 插入符索引位置以及console.log它们输出的内容，并查看哪一个最适合您的边缘情况。

如果您不想自己编写，那么Caret.js （ At.js编辑器库的一部分）会很有用。