如何在 contenteditable 上实现换行和段落？

Question

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

首先进入 - 创建<br>标签

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

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

默认情况下，Safari 在 enter 按键上添加了<div><br></div>，所以我也需要使用 preventDefault 进行第一次输入。 （上面的代码）

我使用以下方法创建新段落：

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

我可以添加 br 使用：(Make a <br> instead of <div></div> by pressing Enter on a contenteditable)

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.
}