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"); 
    }
});

我可以使用：（Make a <br> instead of <div></div> by pressing Enter on a contenteditable）

添加br

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>。在enter keypress中，代码应为<p>This is my paragraph<br></p>（br后的光标）。第二次按Enter键应该<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.
}

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

2 个答案: