问题描述
我正在尝试显示使用div样式并允许编辑的white-space: pre。
但是，每次从键盘插入新行，然后使用innerText从div读取内容时，将获得2条新行而不是1条。我知道浏览器会隐式地将行换行<div>，并插入<br>。但是，我不确定如何获得准确的div的文本表示形式。
例如展示。在下面的代码中，在可编辑的div中输入1<return>2<return><return>3之后，将获得以下内容（其中第二个是两个innerText之间的直接div副本，第三个是实际的{{1 }}显示）：
我整理了一个简单的小提琴来显示此内容：https://jsfiddle.net/mv2h4Lnp/1/
可能的解决方案
听起来很像FireFox changed from using br to div生成标记时遇到的问题。但是，该文章中介绍的解决方案是FireFox特有的，实质上使FireFox的行为类似于更改为在innerHTML s中换行之前。
我还注意到以下`contenteditable` with `white-space: pre-wrap` - newline insertion和https://stackoverflow.com/a/54926262/5660642这样的SO问题，建议最好处理div事件并处理新行而不是留给浏览器。
以此为基础，我更新了小提琴以将以上文章中的想法用作：https://jsfiddle.net/mv2h4Lnp/2/
基本上，以下代码已用于截获返回键：
onkeydown虽然大多数情况下有效。我注意到，当已经有document.getElementById('ss').addEventListener("keydown",e => {
if (e.which == 13) {
e.stopPropagation();
e.preventDefault();
document.execCommand('insertHTML',false,'<br>');
}
});
时，按下返回键时，插入符号就不会插入另一个<br>，而只是将插入符号向前移动一个字符。这不是我想要的，而且我真的不明白为什么在调用<br>时没有插入另一个<br>。
相反，如果将上述JavaScript更新为插入insertHTML而不是\n，则它可以完美地在小提琴中工作，但是在Chrome的小提琴之外运行时，它仍会生成虚假的换行符仍然尝试用<br>换行-因此<div>可能是解决方法。
是否有更好的方法来从<br>取回文本，其中div的新行数与显示的行数相同？我真的不在乎div中它的结构，只是我可以再次访问纯文本。我觉得我缺少明显的东西。
更新：FireFox
只需在FF80中进行测试，它就可以与document.execCommand('insertHTML','<br>');一起正常工作，因此也许它的Chrome（在85版上进行了测试）不能正常使用。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）