如何在contenteditable上实现换行和分段

Question

我正在为Safari构建一个简单的文本编辑器。我需要实现一个非常具体的行为：

首次输入-创建<br>标签

第二次输入（<br>之后）-创建新段落

我已经在听回车键事件，并使用formatBlock格式化段落。如何检查插入符号之前的元素是否是<br>元素，以便使用formatBlock？

默认情况下，Safari在回车键上添加<div><br></div>，所以我也需要在第一次输入时使用preventDefault。（以上代码）

我使用创建新段落

$("#content").live("keypress", function(e){
    if (e.which == 13) {
        document.execCommand("formatBlock", false, "p"); 
    }
});

我可以使用以下方式添加br：（在可编辑内容上按Enter键，生成<br>而不是<div></div>）

if (window.getSelection) {          
    var selection = window.getSelection(),              
        range = selection.getRangeAt(0),              
        br = document.createElement("br");          
    range.deleteContents();          
    range.insertNode(br);
    range.setStartAfter(br);
    range.setEndAfter(br);
    range.collapse(false);
    selection.removeAllRanges();
    selection.addRange(range);
    return false; 
}

更新：用户正在键入如下段落：<p>This is my paragraph</p>。按回车键时，代码应为<p>This is my paragraph<br></p>（br后的光标）。第二次按下回车键应显示<p>This is my paragraph</p><p></p>（光标位于第二段）

Answer 1

您可以使用keydown，例如：

<div id="textarea"></div>

然后在脚本文件中：

document.getElementById("textarea").addEventListener("keydown",function(e){if(e.keyCode == 32) {ocument.getElementById("textarea").innerHTML+="<br />"} })

和你的其他东西

Answer 2

免责声明：这仅在Chromium上测试。

var sel = window.getSelection();
var range = sel.getRangeAt(0);
if ((sel.extentNode.previousElementSibling instanceof HTMLBRElement)
     && range.startOffset == 0)
{
     // Do your magic to start a paragraph.
} else {
     // Your existing code to add a <br> element since there is no <br> before it.
}