I'm one of the WordPress lead developers. We are by far the largest contentEditable "user" considering that WordPress powers 21% of the top 10,000,000 web sites (http://w3techs.com/technologies/overview/content_management/all). Every day hundreds of thousands web pages are created by using WordPress' contentEditable based editor, TinyMCE.
Unfortunately we've been having more and more problems with spans with inline styles being inserted into the editor. TinyMCE has several routines to prevent these spans but it seems lately the spans are being inserted even more aggressively and in more cases.
I've made a very simple example to illustrate the problem: http://jsfiddle.net/eWsGv/6/. Note that execCommand('insertUnorderedList') and execCommand('insertOrderedList') are only wto cases where the unwanted spans appear. There are many other cases.
We've been trying to make the editor look as close to the "front-end" as possible. That generally means a lot of styles are applied in the contentEditable element. As reported by out users, it seems the more styles are there, the higher the chance that unwanted spans will be inserted.
I've tried to find out why WebKit browsers insert these spans, but couldn't. Neither of the other top browsers does anything similar. It looks like this is some sort of user-facing feature to maintain text styling, but in reality it breaks the styling. Even worse: it removes attributes from existing spans. All contentEditable editors I've seen implement some methods of removing these pesky spans.
If this indeed is considered an essential feature in contentEditable, could there be a straightforward way of turning if off, please.
This is a bug with contentEditable fields in chrome that is affecting thousands of developers, it is widely referenced online:
We really need to have this fixed,
please google chrome team, could you please do something about it, it's really affecting our work and apps, thanks very much