TinyMCE inserts spans with font-styles atributes

[thomask]

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

asdfasdfh
<ul>
	<li>asfasdfa</li>
	<li>asdfa</li>
	<li>asfd</li>
</ul>
<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;">
</span></span>

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

[ocean90]

With zoom?

[thomask]

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)

[ocean90]

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?

[azaozz]

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.

[thomask]

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 ​http://tinymce.moxiecode.com/tryit/full.php 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.

[joneiseman]

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.

[azaozz]

This is fixed in the next TinyMCE version.

[hakre]

Related: #18107, #17721

[anmari]

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.

[anmari]

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?

[ocean90]

Do you tested it with current trunk too? (Or ​http://www.tinymce.com/tryit/full.php)

[bobbingwide]

This problem is still affecting users of the TwentyTwelve theme.
See ​http://wordpress.org/support/topic/strange-behaviour-making-lists-in-the-visual-editor?replies=8#post-3760332

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

[SergeyBiryukov]

#23461 was marked as a duplicate.

[lafayettenuke]

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 ​​http://tinymce.moxiecode.com/tryit/full.php

The theme does have an editor style associated with it.

[jhned]

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

[azaozz]

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.

[SergeyBiryukov]

#24155 was marked as a duplicate.

[SergeyBiryukov]

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

Could not reproduce in Firefox 20 so far.

[azaozz]

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.

[danielbachhuber]

Reproduces for me in Chrome 26.0.1410.65 with Twenty Thirteen active:

​https://www.evernote.com/shard/s2/sh/7e3f8f41-771d-4017-b9d7-cb40c0034f1b/9067fd316c8318dc40cb84a2b2a376a9

[lafayettenuke]

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.

[lafayettenuke]

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

[azaozz]

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>.

[azaozz]

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.

[azaozz]

In 24211:

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

[nacin]

Fixed?

[azaozz]

Yes, the workaround works well.