Javascript 如何在contenteditable div中按enter键创建段落？

我正在为我的一个项目制作一个简单的编辑器，我需要使用

contenteditable

属性使用一个可编辑的div。我需要两个功能：

• 两次输入后自动插入hr
• 在回车键上创建一个段落，而不是
  ，并将注意力集中在该段落上

所以我写了这个（带着一些灵感），这是负责的代码的一部分：

var intercept = {
    keydown: function(e)
    {
        if( e.which == 13 ){
            intercept.enterKey.call(null, e);
        }
    },

    enterKey: function(e)
    {
        var $lastElm;

        // Find the previous elm
        if (document.selection) { // IE
            $lastElm = $(document.selection.createRange().parentElement());
        } else { // everyone else
            $lastElm = $(window.getSelection().anchorNode);
        }

        // Handle enter key
        if( !e.shiftKey )
        {
            // Check if two or more paragraphs
            // are empty, so we can add an hr
            if(
                $.trim($lastElm.text()) === "" &&
                !$lastElm.prev().is('hr')
            ){
                document.execCommand('insertParagraph', false);
                $lastElm.replaceWith($('<hr>', {contenteditable: false}));
            }
            // Or just add an paragraph
            else{
                document.execCommand('insertParagraph', false, true);
            }

            e.preventDefault();
        }
    }
}

var拦截={
向下键：功能（e）
{
如果（e.which==13）{
intercept.enterKey.call（null，e）；
}
},
输入键：功能（e）
{
var$lastElm；
//找到以前的榆树
if（document.selection）{//IE
$lastElm=$（document.selection.createRange（）.parentElement（））；
}其他人
$lastElm=$（window.getSelection（）.anchorNode）；
}
//手柄输入键
如果（！e.shiftKey）
{
//检查是否有两个或更多段落
//是空的，因此我们可以添加一个hr
如果(
$.trim（$lastElm.text（））==“”&&
！$lastElm.prev（）是（'hr'））
){
document.execCommand（'insert段落'，false）；
$lastElm.replaceWith（$（“
”，{contenteditable:false}））；
}
//或者只添加一段
否则{
document.execCommand（'insertparagration'，false，true）；
}
e、 预防默认值（）；
}
}
}

这在Chrome中运行良好，但在Firefox中，它不会创建新的

元素，我认为它只是将当前文本包装在

p

中，这是不可能的，因为它已经在

p

中了。因此，光标只停留在firefox中，不会创建新段落

你知道如何解决这个问题吗？

---

谢谢。

我做了一些完全基于JQuery的事情：

var debug=0;
$(function (){
    $(".test").on('blur keyup paste focus focusout',function (){
        if($(".test").children().size()==0)
        {
            if(debug) console.log("add p");
            //Only Test now
            var text=$(".test").text();
            $(".test").empty();
            $(".test").append("<p>"+text+"</p>");
        }

        if(debug) console.log("-------------------------");
        if(debug) console.log($(".test").children());
        for(var i=0;i<$(".test").children().size();i++)
        {
            var tag=$(".test").children().eq(i).prop("tagName").toLowerCase();
            console.log("i="+i+" ["+tag+"]");
            if(i%3==2)
            {
                if($(".test").children().size()==i+1 && $(".test").children().last().text()=="")
                    continue;

                if(tag!="hr")
                {
                    if(debug) console.log("  add hr");
                    $(".test").children().eq(i).before("<hr/>")    
                }
            }
            else if(tag=="hr")
            {
                if(debug) console.log("  rm hr");
                $(".test").children().get(i).remove();
            }
            else if(tag=="br")
            {
                if(debug) console.log("  br");
                $(".test").children().eq(i).remove();
                var text=$(".test").children().size>=i?$(".test").children().eq(i+1).text():"";
                $(".test").children().eq(i).after($("<p>"+text +"</p>"));
                $(".test").children().eq(i).append("<p>"+text+"</p>");
                if($(".test").children().size>=i+1) 
                    $(".test").children().eq(i+1).remove();    
            }
            else if (tag!="p")
            {
                if(debug) console.log("  not p");
                var text=$(".test").children().eq(i).text();
                $(".test").children().eq(i).remove();
                $(".test").children().eq(i).after($("<p>"+text +"</p>"));
            }

        }

    });

var调试=0；
$（函数（）{
$（“.test”）.on（'blur keyup paste focusout'，函数（）{
if（$（“.test”）.children（）.size（）=0）
{
if（debug）console.log（“addp”）；
//现在只有考试了
var text=$（“.test”）.text（）；
$（“.test”）.empty（）；
$（“.test”）。追加（“”+text+”
”）；
}
if（debug）console.log（“---------------------------”）；
if（debug）console.log（$（“.test”）.children（）；
对于（var i=0；i=i？$（“.test”）.children（）.eq（i+1）.text（）：”；
$（“.test”）.children（）；
$（“.test”）.children（）；
如果（$（“.test”）.children（）.size>=i+1）
$（“.test”）.children（）.eq（i+1）.remove（）；
}
否则如果（标记！=“p”）
{
if（debug）console.log（“非p”）；
var text=$（“.test”）.children（）.eq（i）.text（）；
$（“.test”）.children（）.eq（i）.remove（）；
$（“.test”）.children（）；
}
}
});

希望这有帮助！

在Jquery中，您可以使用以下方法：
From Jquery you can use this method:

var html="";
var intercept = {
    keydown: function(e)
    {
        if( e.which == 13 ){
            intercept.enterKey.call(null, e);
        }
    },

    enterKey: function(e)
    {
        $("#append_id").html("");
        html+="your text";
        $("#append_id").html("<p>"+html+"</p>");
    }
}

var html=“”；
变量截距={
向下键：功能（e）
{
如果（e.which==13）{
intercept.enterKey.call（null，e）；
}
},
输入键：功能（e）
{
$（“#append_id”）.html（“”）；
html+=“您的文本”；
$（“#append_id”）.html（“”+html+”
”）；
}
}

有没有关于这个的JSFIDLE？