Firefox 在错误的位置显示插入符号？

Question

我正在制作一个编辑器，我有一个 DOM 结构，比如

<div id="container" contenteditable=true>

  <div id="one">Some fancy text</div>

  <div id="two">Some other text</div>

  <div id="three">and that's enough!</div>

</div>

在此编辑器中，写入的文本位于 div 'container' 内，该 div 是一个内容可编辑的 div，然后分成几个内部 div，随着用户写入而变化。在我的结构中，以编程方式，在网页生命周期中，在“容器”中添加、删除和移动了许多 div，甚至更改了 id。我不需要在主 div（带有数字 id 的那些）内有额外的 div 块，所以我强制以编程方式在按下返回时添加一个 br，而不是像 firefox 那样在 div 中包装文本。

由于 Firefox 中的问题，插入符号（光标）的行为非常奇怪，我无法解决该问题。

问题似乎是众所周知的。Firefox 解决了在按下返回键时在文本周围放置额外 div 的问题。

在我的情况下，避免这种情况，当您第一次在最后一个 div 的末尾按回车时，插入符号正确移动（如果您继续书写，它会在新行的正确位置写入），但显示在一个奇怪的位置，就像在上一行的开头一样。这只发生在最后一个 div 的最后。

它也显示在此处，但建议的解决方案对我不起作用Firefox 设置了错误的插入符号位置 contentEditable 与 :before

在这里你可以看到问题本身：

window.addEventListener('keydown', function (event) {

  

  if(event.keyCode === 13){

    event.preventDefault(); // Ensure it is only this code that runs

    console.log("+++ Pressed return and adding a br!");

    addHtmlElementAtCursor('br');

    

    return false;

  }

});

function keyPress(event) {

  

}

function addHtmlElementAtCursor(element) {

  var sel, range, textNode;

  if (window.getSelection) {

      sel = window.getSelection();

      if (sel.getRangeAt && sel.rangeCount) {

          range = sel.getRangeAt(0);

          range.deleteContents();

          if (element==' ') {

            textNode = document.createTextNode('\u00A0');

          }else{

            textNode = document.createElement(element);

          }

          range.insertNode(textNode);

          // Move caret to the end of the newly inserted text node

          range.setStartAfter(textNode, textNode.length);

          range.setEndAfter(textNode, textNode.length);

          sel.removeAllRanges();

          sel.addRange(range);

      }

  } else if (document.selection && document.selection.createRange) {

      range = document.selection.createRange();

      range.pasteHTML(text);

  }

Answer 1

似乎在大多数情况下将这个 css 规则添加到“容器”中可以解决问题：white-space:&nbsp;pre-wrap;

Answer 2

我相信这仍然是 Firefox 中的一个已知错误。请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=904846。尽管该错误是在 6 年前创建的，但它在 8 个月前以相同的“打开”状态进行了更新。我也希望这个开放的错误得到解决。