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“容器”內部，該div是一個內容可編輯的div，然后分成多個內部div，並在用戶書寫時更改。 在我的結構中，以編程方式，在網頁生存期間，很多div都在“容器”中添加，刪除和移動，甚至更改了id。 我不需要在主div（帶有數字ID的div）內放置額外的div塊，因此我以編程方式強制在返回的壓力上添加br，而不是像通常的firefox那樣將文本包裝在div中。

由於Firefox中的問題，插入符號（光標）的行為確實很奇怪，我無法解決問題。

這個問題似乎是已知的。 Firefox解決了此問題，當按下返回鍵時，會在文本周圍的html中添加額外的div。

就我而言，為避免這種情況，您第一次在最后一個div末尾按回車鍵時，插入記號可以正確移動（如果繼續書寫，它將在新行上的正確位置書寫），但顯示的位置很奇怪，就像上一行的開頭一樣。 這僅發生在最后一個div的末尾。

它也在此處顯示，但是建議的解決方案對我不起作用Firefox設置了錯誤的插入符位置contentEditable with：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('\ '); }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> 

Answer 1

我相信這仍然是Firefox中的已知錯誤。 請參閱https://bugzilla.mozilla.org/show_bug.cgi?id=904846 。即使該錯誤是在6年前創建的，但仍在8個月前以“打開”狀態進行了更新。 我也希望這個開放的錯誤也得到解決。

Answer 2

似乎將此CSS規則添加到“容器”可以解決大多數情況下的問題：

white-space: pre-wrap;