相关疑难解决方法(0)

我在网站上运行了一个JavaScript WYSIWYG编辑器(与CKEditor不同).

它有一个设置,<br>当你Enter在编辑器中按下时,IE会创建换行符.

这很好用,但不幸的是,Firefox(我用5和7进行了测试)仍然会生成<p>元素,并且<br>只有在你使用时才生成s Shift + Enter.

有没有办法让Firefox总是<br>在contentEditable中生成元素？

我正在尝试显示一个div使用white-space: pre样式并允许编辑的样式。

但是，每次从键盘插入新行，然后使用获取innerText2 个新行而不是 1 个新行从 div 读回内容。我知道浏览器隐式地将行换行在<div>'s 中并插入<br>'s 。但是，我不确定如何获得div准确的文本表示。

例如演示。下面，输入1<return>2<return><return>3可编辑的div后，得到以下内容（其中第二个是innerText两个divs之间的直接复制，第三个是实际innerHTML显示的）：

我整理了一个简单的小提琴来显示这一点： https: //jsfiddle.net/mv2h4Lnp/1/

可能的解决方案

这听起来很像FireFox 从“使用”更改br为div“在生成的标记中”时遇到的问题。然而，该文章中提出的解决方案是 FireFox 特定的，本质上使 FireFox 的行为与更改为在 s 中换行之前一样div。

我还注意到以下 SO 问题`contenteditable` 和 `white-space: pre-wrap` - 换行符插入和/sf/answers/3844838371/给出了最好处理 onkeydown事件和处理的建议使用新行而不是留给浏览器。

以此为基础，我更新了小提琴以使用上述文章中的想法： https: //jsfiddle.net/mv2h4Lnp/2/

本质上，以下代码用于拦截返回键：

document.getElementById('ss').addEventListener("keydown", e => {
  if (e.which == 13) {
    e.stopPropagation();
    e.preventDefault();
    document.execCommand('insertHTML', …