javascript - 如何在可内容编辑的 div 中输入段落？

Question

我正在为我的一个项目制作一个简单的编辑器，我需要使用一个可编辑的 div 使用contenteditable属性。我需要两个功能：

• 两次输入后自动插入小时
• 创建一个段落而不是<br>输入并专注于它。

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

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

这在 Chrome 中运行良好，但在 Firefox 中，它不会创建新<p>元素，我认为它只是将当前文本包装在 ap中，这是不可能的，因为它已经在 a 中p。所以光标只停留在 Firefox 中，并且不会创建新段落。

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

Answer 1

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

Answer 2

我做了一些完全基于 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>"));
            }

        }

    });

http://jsfiddle.net/aj33Q/14/

希望这可以帮助！