How to create paragraph for input in contenteditable div?

Question

I am making a simple editor for my project where I need to use an editable div using the contenteditable property. I need two functions:

• Auto insert hr after two inputs
• Create a paragraph instead of <br> to enter and focus on it.

So I wrote this (with some inspiration), this is part of the code that answers:

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

This works fine in Chrome, but in Firefox it does not create a new <p> element, I think it just wraps the current text in p , which is impossible because it is already in p . That way, the cursor just stays in firefox and no new paragraph is created.

Do you have an idea how to fix this? Thanks.

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

I did what is completely based on 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/

Hope this helps!