Content Editable P Tags on Chrome

A way to have contenteditable divs create <p> tags inside instead of <div> tags for line breaks.

HTML

<!--The contenteditable that in Chrome will create nasty div tags on line breaks-->
<div contenteditable id="nastyEditable">
  This contenteditable will use div blocks for line breaks! Bleh-heh-heh! Add some line breaks and witness the horror!
</div>

<hr>

<!--The contenteditable that in Chrome will create nice p tags on line breaks-->
<div contentEditable id="niceEditable">
  <p>Replace me and I'll return pretty 	&lt;p&gt; tag code! La-la-la! Make sure to use line breaks! &hearts;</p> <!--Note that the p tag DOES need to have some default text in it for this to work. You can always check on blur if the div is empty, and then add a default text p tag back in so the user doesn't get stuck with ugly div tags by accident.-->
</div>

CSS

/*This CSS isn't necessary; it just makes the demo easier to see*/
div{
  border:1px solid black;
  width:100%;
}

JavaScript

//These two functions return to the code to the console, if you're feeling lazy.

document.getElementById("nastyEditable").addEventListener("blur",
	function(){
  	console.log("Nasty code returned:",document.getElementById("nastyEditable"));
  }
);

document.getElementById("niceEditable").addEventListener("blur",
	function(){
  	console.log("Nice code returned:",document.getElementById("niceEditable"));
	}
);