Javascript contenteditable-选择2个子段落并在上面写入文本（Firefox版）

我已经在谷歌上搜索了一个多星期了，我一直在尝试实现不同的解决方案，但没有成功，这让我感到非常困扰

因此，您有一个contenteditable div，其中包含多个段落或其他同类子元素。显然这是你想要保持的布局。如果用户选择两个或多个段落并在其上键入文本，则会删除段落并在父div内设置插入符号焦点：

身体{ 字体系列：格鲁吉亚； } .可编辑{ 颜色：红色； } .p.可编辑{ 颜色：333； } .可编辑范围{ 颜色：柠檬黄！重要； } 第一段第二段

如何重现错误：

将光标放在两个段落之一的某个位置，以聚焦上面可编辑的内容。 在windows或linux中按ctrl-a或在osx中按cmd-a选择全部 键入一些文本 红色文本表示文本直接进入contenteditable div，黑色文本表示它进入段落 正确的行为应该是，在仅具有块标记的contenteditable中选择all和delete或键入over应该将光标留在第一个块标记内

---

Webkit做对了，Firefox做错了。

发生的是，当你选择两组文本并删除它们时，你也在删除可编辑元素中的所有标记。因此，实际上从div中删除标记，然后唯一要写入的就是div本身

为什么需要两个单独的段落标签？这将更容易有自己的div。。。

---

您没有将div设置为可编辑，而是尝试将标记设置为

，以便Firefox在删除段落时将这种讨厌的东西注入contenteditable div

通过一点jQuery，我们可以删除它并用段落标记替换它

当前限制-break标记似乎只有在用delete或backspace删除时才被注入，而不是在上面键入时。。。考虑这个概念：-

在Firefox中打开此示例进行测试：

$button.clickfunction{ $br:notp br.replace为“给我写信！

”；//在p内时不要替换 }; 身体{ 字体系列：格鲁吉亚； } .可编辑{ 颜色：红色； } .p.可编辑{ 颜色：333； } .可编辑范围{ 颜色：柠檬黄！重要； } 第一段

第二段

删除所有文本以触发Firefox中的bug并点击修复问题

Webkit做对了，Firefox做错了

---

很好地解决了这个问题，因为当一个div中有两个段落标记是contenteditable时，只要按enter键，就会创建另一个段落。如果您将每个段落内容设置为可编辑，那么您将无法选择多个段落……是的，我们知道它会选择两个段落，问题是如何修复它。如果你在Chrome或IE上尝试同样的东西，你会得到不同的结果。问题是如何使行为在所有浏览器中保持一致。'var children=$edit.children；如果$children.length==0{$edit.html；}'这将返回div中id为edit的子级数。把它放到按键事件中，当它们被删除时，它应该把段落标签放回。没有标准，所以说Firefox的行为是错误的是不公平的。是的，我注意到，我尝试过类似的方法，但仍然没有达到预期的效果。。。查看我的问题编辑