title: How to force enter key to make a line break inside iframe editor
body: <p>I am trying to learn how to make a text editor using javascript(I am new to JavaScript).Here I create 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 new line for typing texts. How can I force a line break  to be created instead of a paragraph element?also if I clicked outside of the quotation mark it wont allow me to write inside the paragraph</p>
  
  <pre><code>&lt;script&gt;
      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";   
          m.appendChild(t);
          idContent.document.body.appendChild(m);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my html code,</p>
  
  <pre><code>&lt;body onLoad="loads();" style="position:relative;"&gt;
      &lt;iframe id="idContent" width="600" height="280" contenteditable="true" &gt;&lt;/iframe&gt;
      &lt;input type="button" value="para" onClick="para();"&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is my css styles,</p>
  
  <pre><code>&lt;style&gt;
      * {
          margin:0px;
          padding:0px;
      }
  
      q {
          color:;
      }
  
      #idContent{
          background-color:pink;
      }
  
      div{
          border:1px solid black;
      }
  &lt;/style&gt;
  </code></pre>