我正在做一个编辑器，我有一个像这样的 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 "容器"内，该容器是一个内容可编辑的div，然后分为几个内部div，在用户写入时更改。在我的结构中，以编程方式，在网页生命周期中，许多div在"容器"内添加，删除和移动，甚至更改id。我不需要在主div(带有数字 id 的那些(内添加额外的div 块，所以我在按下返回时强制以编程方式添加一个 br，而不是像 Firefox 通常那样将文本包装在div 中。
由于Firefox中的问题，插入符号(光标(的行为真的很奇怪，我无法解决问题。
这个问题似乎是众所周知的。Firefox 解决了这个问题，当按下回车键时，在文本周围放置额外的div。
就我而言，避免这种情况，当您第一次在最后一个div 的末尾按回车键时，插入符号会正确移动(如果您继续书写，它会在新行的正确位置写入(，但显示在一个奇怪的位置，就像在上一行的开头一样。这只发生在最后一个div的末尾。
它也显示在这里，但建议的解决方案对我不起作用 Firefox 设置了错误的插入符号位置内容可使用 ：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);
}
}<div id="container" contenteditable=true>
<div id="one">some text</div>
<div id="two">some other text</div>
<div id="three">some other other text, try to give a return after the laste e of 'here' -> HERE</div>
</div>似乎将这个 css 规则添加到"容器"在大多数情况下可以解决问题：
white-space: pre-wrap;
我相信这仍然是Firefox中的一个已知错误。请参阅 https://bugzilla.mozilla.org/show_bug.cgi?id=904846 。尽管该错误是在 6 年前创建的，但它在 8 个月前以相同的"打开"状态进行了更新。我也希望解决这个未解决的错误。