title: HTML contenteditable disable native rich text editing
body: <p>I'm trying to make a <strong>article</strong> element editable by including the attribute <code>contenteditable</code>, which works fine. I'm able to type new text and style it without additional JS.</p>
  
  <p>My problem is the native rich text editing, although is great for basic things like <code>&lt;b&gt;</code> or <code>&lt;u&gt;</code>, breaks some of my default formatting. When I hit <kbd>enter</kbd> the text shifts down [wrapping the new line of text in a new <code>&lt;p&gt;</code> tag], but then when I hit <kbd>backspace</kbd> as if to add it back to original paragraph, the native editor wraps the text in a <code>&lt;span&gt;</code> tag.</p>
  
  <p>If this were just the case, I could deal with unnecessary span tags, but unfortunately the native editor <em>also</em> adds inline styling to the span tag, pulling the styles from the outer <code>contenteditable</code> element, so the tag would now look like this:</p>
  
  <pre><code>&lt;span style="font-size: 1.5em; line-height: 1.3em;"&gt;
  </code></pre>
  
  <p>This presents a problem in itself when working with <code>em</code> units, as now the text within the <code>&lt;span&gt;</code> increases in size 1.5 times, not to mention the messed up line height. Therefor I would much rather have the article element contenteditable, but disable the default rich text editing capabilities and roll my own in JS.</p>
  
  <p>In essence: <strong>How do I allow an element to be <em>contenteditable</em>, but disable the native rich text editing functionality?</strong></p>
  
  <p>I should also add that I'm working in Chrome, if this makes a difference. Does this happen with all browsers?</p>