Make WordPress Core

Opened 13 years ago

Closed 11 years ago

#17154 closed defect (bug) (fixed)

TinyMCE inserts spans with font-styles atributes

Reported by: thomask's profile thomask Owned by: azaozz's profile azaozz
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.1
Component: TinyMCE Keywords: needs-testing
Focuses: Cc:


This is continuation of #14218 which seems to be not fixed in 3.1 and still exist even in current 3.2. Reproducing steps

  1. Open WP in latest Chrome (any version) - and probably also in other webkit browsers
  2. Create new post
  3. create UL with clicking on bullet icon
  4. type some Li elements
  5. close ul with <- icon (in advanced tinymce line)
  6. type some text
  7. switch to html view or publish article and see the code, you will see something like
<span style="font-size: small;"><span class="Apple-style-span" style="line-height: 24px;">adfasdfasd</span></span>

<span style="font-size: small;"><span class="Apple-style-span" style="line-height: 24px;">asfasd</span></span>

<span style="font-size: small;"><span class="Apple-style-span" style="line-height: 24px;">

P.S.: i can't select Version 3.2 in the bug report properties

Attachments (3)

17154.patch (960 bytes) - added by azaozz 11 years ago.
17154-2.patch (4.8 KB) - added by azaozz 11 years ago.
17154-3.patch (2.2 KB) - added by azaozz 11 years ago.

Download all attachments as: .zip

Change History (34)

#1 follow-up: @ocean90
13 years ago

With zoom?

#2 in reply to: ↑ 1 @thomask
13 years ago

Replying to ocean90:

With zoom?

Sorry, i'm do not speak English natively so i do not understand what does zooming have with my bug report in any of it's meaning i know in my language. Can you elaborate on your question?

(i just got an idea if you mean if i got some zoom level other then 100 % in my browser - no, i do not have, just basic default browser with basic default wordpress)

#3 follow-up: @ocean90
13 years ago

Okay, then we can close #14218. There was a problem with the browser zoom, means everything is smaller (ctrl + -). which is fixed.

Can you explain point 5 from your list, do you mean the tinymce advanced plugin?

#4 @azaozz
13 years ago

  • Keywords needs-patch removed
  • Milestone changed from Awaiting Review to Future Release
  • Severity changed from major to normal

Not sure with point 5 above too but was able to reproduce it in Chrome 10 this way:

  • start new post
  • type some text and press Enter
  • click on the UL button, at this point the editor inserts UL and LI and places the cursor in the LI.
  • type some more creating 2-3 list items
  • press Enter twice, first one starts another LI, the second removes the LI, closes the UL and places the cursor below it
  • type another paragraph or two

All text after the so created UL is wrapped in <div> instead of <p> and if the editor's CSS (content.css or editor-style.css from the theme) has font-size and line-height set, the browser inserts multiple <span>.

This is a WebKit bug in contentEditable mode, most likely related to the bug with inserting <span> when the view is zoomed. Unfortunately there's little we can do in WordPress to fix this other than passing it upstream to both TinyMCE and WebKit teams.

There's a workaround for this too: type all list items as paragraphs first, type another paragraph after the intended list, select the paragraphs that you want to convert to a list and press the UL or OL button.

#5 in reply to: ↑ 3 @thomask
13 years ago

Can you explain point 5 from your list, do you mean the tinymce advanced plugin?

No, I mean that normaly you see only first toolbar line, you must click Advanced and then second line appears, where is also <- outdent icon which closes LI. I didn't know that you can close them with two enters (but that inserts DIV, not P, but it is lesser problem then that spans)

I do not think this is a problem of tinymce or chrome - if you try the same on the page, it works without this problem (only that divs with two enters appears on that demo as well, so this should be reported to tinymce). So it is just some wp settings or it was repaired in some newer version of tinymce.

#6 @joneiseman
13 years ago

I see this same problem when trying to paste text from a MS Word document into WordPress (using the "Paste from Word" button). It will insert something like the following at the beginning of each paragraph:

<span style="font-family: Times New Roman; font-size: small;">

(and </span> at the end of each paragraph).

This doesn't happen every time.

#7 @azaozz
13 years ago

  • Resolution set to worksforme
  • Status changed from new to closed

This is fixed in the next TinyMCE version.

#9 @ocean90
13 years ago

  • Milestone Future Release deleted

#10 @anmari
13 years ago

I am on latest wp 3.2.1 and still have this problem occurring.

Just wanted to add a note for others who end up here that apparently wp 3.3 will include the latest TinyMCE. See 17721.

#11 @anmari
12 years ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

Hi all,

Just flagging that now on wp 3.3.1 and still have problems in chrome with div's and spans. I guess tinymce didn't fix or latest version not in?

#12 @ocean90
12 years ago

  • Milestone set to Awaiting Review

Do you tested it with current trunk too? (Or

#13 @bobbingwide
11 years ago

This problem is still affecting users of the TwentyTwelve theme.

Perhaps azaozz would care to revisit this determine if there's anything that can be done in the twentytwelve theme's editor-style.css file and/or TinyMCE

#14 @SergeyBiryukov
11 years ago

#23461 was marked as a duplicate.

#15 @lafayettenuke
11 years ago

I'm seeing the same problem in WordPress 3.5.1 using a custom theme with Safari or Chrome. It only happens in WordPress TinyMCE; it doesn't happen in ​

The theme does have an editor style associated with it.

#16 @jhned
11 years ago

I'm experiencing this problem as well, under the same conditions as lafayettenuke.

#17 @azaozz
11 years ago

  • Keywords reporter-feedback added

Could you do some more testing with/without editor-style.css, and if different behaviour, could you try to isolate the css rule(s) causing it or perhaps attach the file here.

#18 @SergeyBiryukov
11 years ago

#24155 was marked as a duplicate.

#19 @SergeyBiryukov
11 years ago

Per #24155, happens in Firefox too. Well, maybe not: ticket:24155:6.

Could not reproduce in Firefox 20 so far.

Last edited 11 years ago by SergeyBiryukov (previous) (diff)

11 years ago

#20 @azaozz
11 years ago

As mentioned above this is a WebKit bug. It happens when executing some built-in contenteditable commands, InsertUnorderedList and InsertOrderedList always trigger it. If there are any font-* declarations for the element that is converted to a list, WebKit wraps the text in a span with inline style.

It seems this doesn't happen when the font css declaration is combined. We can use that as a workaround pending more testing to confirm this works in all possible cases. That would also mean all themes that have editor-style.css would have to be updated.

#22 @lafayettenuke
11 years ago

I can recreate this in two ways using Chrome 26.0.1410.43 on Mac OS 10.7.5

The Bulleted List

  • Add three lines of text to a post: One. Two. Three. (each word should be on its own line)
  • Use the "bullet" command to turn "One" into the first item of an unordered list.
  • Delete the space between "One" and "Two" so they are on the same line.
  • Hit return after "One". "Two" gets its own line, and its own bullet.

After doing this, Chrome will have added an inline style to the first bullet:

<span style="font-size: 16px;">TEXT GOES HERE</span>

The Paragraph

  • Add three paragraphs.
  • Go to the first line of the second paragraph. Using your mouse, select everything from the beginning of the first paragraph (just the space at the
  • beginning of the paragraph; not the text) up to the top of the first paragraph (all text should be included).
  • Hit delete.

Your new first paragraph will now be surrounded by a span rather than a P tag. The code will be:

<span style="font-size: 16px;">TEXT GOES HERE</span>

Note: This doesn't have to be the first paragraph. It will anywhere in post, and it doesn't have to be exactly as I've spelled out above -- depending on how you select a paragraph of text and delete it, it's possible for a SPAN tag to get inserted.

#23 @lafayettenuke
11 years ago

To be clear, my tests were done under WordPress 3.5.1 and the TwentyTen theme.

11 years ago

#24 @azaozz
11 years ago

Did more digging. Seems WebKit compares the text styling before/after when executing native contenteditable commands that deal with blocks, like inserting or removing lists, merging paragraphs, etc. If there are any differences, it inserts a <span> with inline style to "fix" them...

17154-2.patch​ attempts to remove these differences in most cases, especially when inserting and removing <ul> and <ol>.

11 years ago

#25 @azaozz
11 years ago

17154-3.patch adds a <style> to normalize the differences that trigger insertion of a <span> immediately before executing InsertUnorderedList or InsertOrderedList, and removes it after. This covers almost all cases that span is inserted without the need to modify all themes.

#26 @azaozz
11 years ago

In 24211:

TinyMCE: attempt a workaround for WebKit bug inserting spans with font styles when creating UL or OL. See #17154

#27 @SergeyBiryukov
11 years ago

  • Milestone changed from Awaiting Review to 3.6

#28 @ev3rywh3re
11 years ago

  • Cc jess@… added

#29 @SergeyBiryukov
11 years ago

  • Keywords needs-testing added; reporter-feedback removed

#30 @nacin
11 years ago

  • Owner set to azaozz
  • Status changed from reopened to assigned


#31 @azaozz
11 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

Yes, the workaround works well.

Note: See TracTickets for help on using tickets.