title: How to prevent browser from inserting HTML into a contenteditable element
body: <p>When a user inserts linebreaks in a <code>contenteditable</code> element, browsers insert HTML into the element. </p>
  
  <p>Here is what you get when you hit <code>[Enter]</code> in various browsers:</p>
  
  <pre><code>IE:      &lt;p&gt;&lt;/p&gt;
  Chrome:  &lt;div&gt;&lt;br&gt;&lt;/div&gt;
  Safari:  &lt;div&gt;&lt;br&gt;&lt;/div&gt;
  Firefox: &lt;br /&gt;
  Opera:   &lt;br /&gt;
  </code></pre>
  
  <p>(Test for yourself with <a href="http://jsfiddle.net/brentonstrine/e7LfW/" rel="noreferrer">this JSFiddle demo</a>.)</p>
  
  <p>Is there a way to get the browser NOT to insert HTML when the user hasn't inserted any HTML? Of course, I could just use</p>
  
  <pre><code>&lt;textarea&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>...and that does behave very <em>similar</em> to how I want, however, I <em>don't</em> want a strictly "text-only" input, as I will be adding and modifying HTML in the editable element using Javascript.</p>
  
  <p>I considered constantly stripping all HTML out as the user types, only allowing HTML with a special class that I create to remain. That doesn't seem like a great solution, however. Is there something like <code>wrap='soft'</code> or some other way to say <em>"stop making up HTML and putting it in my element!"</em></p>