Bug 127242 - Unwanted spans inserted in contentEditable elements
Summary: Unwanted spans inserted in contentEditable elements
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML Editing (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-01-18 16:34 PST by Andrew Ozz
Modified: 2014-02-14 13:35 PST (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Andrew Ozz 2014-01-18 16:34:45 PST
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.
Comment 1 javismiles 2014-01-27 10:47:59 PST
This is a bug with contentEditable fields in chrome that is affecting thousands of developers, it is widely referenced online:

http://www.neotericdesign.com/blog/2013/3/working-around-chrome-s-contenteditable-span-bug

https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=226941

http://stackoverflow.com/questions/15015019/prevent-chrome-from-wrapping-contents-of-joined-p-with-a-span

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