i am trying to learn how to make a text editor.here i creat a paragraph using "para" button.and inside the paragraph there will be a quote.Every time I press 'enter' within this paragraph, a new paragraph is created, rather than a line break tag (<br>). How can I force a line break tag to be created instead of a paragraph element?also

i cant even get outside of the quote tag.though designMode is on and contenteditable is true for both paragrap and quote
HTML Code:
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
*{margin:0px;padding:0px;}

#idContent{
	background-color:pink;
}
div{
	border:1px solid black;
}
</style>
</head>

<body onLoad="loads();" style="position:relative;">
<iframe id="idContent" width="600" height="280" contenteditable="true" ></iframe>
<input type="button" value="para" onClick="para();">

<script>
function loads(){
	idContent.document.designMode="On";
}
function para(){
	
    var m=document.createElement("p");
	
m.setAttribute('style',"border:1px solid black;height:100px;width:500px;position:relative;background-color:white;");
m.setAttribute('designMode',"on");
m.setAttribute('contenteditable',"true");
	
	var t=document.createElement("q");
	t.innerHTML="quote here";
	t.setAttribute('designMode',"on");
	t.setAttribute('contenteditable',"true");
	m.appendChild(t);
	idContent.document.body.appendChild(m);
	
}
</script>
</body>
</html>