html - 强制 contenteditable 内容在 div 或 p 内

Question

有谁知道如何强制一个内容可编辑的 div 的内容被 div 或 p 包围？如果 contenteditable 的内容是一个空的 div - 选择带有范围的它可以在 Firefox 上工作，例如，但在 chrome 上，文本插入在 div 之前。我需要文字

HTML:
<div id="edit" contenteditable="true"><div id="insert"></div></div>

Tried this but the results are very inconsistent cross browser:

var range = document.createRange();
range.selectNodeContents(document.getElementById('insert'));

var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

这里的第二个问题是，对于一个空的 contentEditable，这是否有可能以某种方式实现，这是否也可以用于手动插入换行符以确保永远不会获取
标签而不是新的 div 或 p？

谢谢

更新

似乎以下在某种程度上起作用:

<div id="edit" contenteditable="true"><div id="insert"><br/></div></div>

使用额外的
Firefox、Chrome、Safari 都会生成一个空行，所有输入都在 div 内结束，但 Internet Explorer(已测试版本 9)显示两个空行。如果没有其他可用的解决方案 - 有什么想法可以在不使用浏览器检测的情况下解决这个问题吗？

Answer 1

您可以在您的 css 文件中覆盖 br 标签。

br {
    display:block;
    clear: both;
    height: 1em;
    line-height: 1em;
}

我不太确定 em 是否有效。如果没有，您也必须尝试使用​​ px 格式。