TinyMCE adding inline line-height styles and spans

[lumpysimon]

When using the visual editor, inline styles are often added to tags (so far I've seen them added to <p>, <li> and <a> tags). I'm also seeing <span> elements created out of the blue containing the inline styles, wrapping around existing text.

The styles are always in one of the following two formats: style="line-height: 1.5;" or style="line-height: 1.5em;".

I have not been able to work out a pattern to it - sometimes I can edit away for ages without problem, other times the styles are being added to multiple items pretty much constantly. I can delete the styles, then do further editing (in the visual editor), but they are very often added back in again.

So far this has only happened to me on 3.8 and 3.8.1 when using Chrome on Windows 7. However, due to its unpredictable nature, I can't be sure it doesn't happen on other browsers. I'm not able to test on Mac.

There are several old closed trac tickets from about 3yrs ago, but nothing recent. I'm 99% sure this started for me with 3.8.

[lumpysimon]

Screenshot showing inline styles and spans

[lumpysimon]

Example of old similar ticket marked as fixed: #17154

[azaozz]

This seems to be a "feature" in WebKit. Has been happening for quite a while and TinyMCE (and all other contenteditable based editors) have been removing the spans. See ​https://bugs.webkit.org/show_bug.cgi?id=127242 and ​https://code.google.com/p/chromium/issues/detail?id=335955.

Recent versions of Chrome have been even more aggressive in inserting these spans. Until this is fixed in WebKit, the only 100% fix is to use Firefox.

[lumpysimon]

That's annoying, let's hope that gets fixed soon.

For now I've rolled out a quick plugin to my clients' sites that strips out all occurrences of style="line-height: 1.5;" on the save_post hook. I know for sure that none of my clients ever have reason to insert inline styles so this is fine for now. See ​https://gist.github.com/lumpysimon/8782859

[azaozz]

...strips out all occurrences of style="line-height: 1.5;"

The exact inline styles depend on all styles applied inside the editor, including the theme's editor-style.css, so they vary from site to site. The bad part is some may be added by the user, like font-face and color, but line-height is definitely safe to remove.

[lumpysimon]

I understand this wouldn't work if released as a general plugin, but for my clients' sites which are much more locked down (they can't change themes and don't get all the tinyMCE buttons for example) this will solve 99% of issues.

[Mr. Z]

Replying to lumpysimon:

Tried this plugin. Doesn't fix the problem... Doesn't appear to do anything in fact.

[Mr. Z]

Correction. Adding em after line-height: 1.5 in line 77 solves the problem:

'post_content' => str_replace( ' style="line-height: 1.5em;"', '', $post->post_content )

Great plugin. Thanks!

[SergeyBiryukov]

Previously: #17154, #23461, #24155.

Seems like [24211] should have fixed this?

[lumpysimon]

Replying to SergeyBiryukov:

Seems like [24211] should have fixed this?

Unfortunately not. According to azaozz's comment above Webkit has become more aggressive, and it's not only affecting <ul> and <li> tags now (I'm seeing it in <p> and <a> as well).

[iamonlythird]

Just to confirm that this problem is very current indeed. I run a trafficed multiple author site and receive many submissions and many of them have SPAN and EM tags with the line-height added.

The plugin fixed this, thank you very much for posting it. I hope that there will be a core fix for this in the future.

[itsmicks]

We are also seeing this issue across Webkit browsers on our multi-author sites -- we had to switch everyone over to Firefox.

I can recreate by cutting and pasting text within the post itself (ie, no 3rd party pasting from Word or elsewhere) and just moving paragraphs around. @lumpysimon's plugin from above is currently working for us as a temp fix.

[azaozz]

The bad news is WebKit and particularly Chrome is getting more and more aggressive in inserting these unwanted styles with each new version. Seen reports that even gamil is affected.

The good news is that in TinyMCE 4.0 the paste plugin filters content even when pasting from one place in the editor to another, or dragging selected text. Only font-style, font-weight and color are retained (this is configurable from the tiny_mce_before_init filter).

Been looking at making another content filter based off the presence of line-height. Not just to remove that but filter the rest of the inline styles allowing only a small subset that may have been added by the user. Something like the filtering in the paste plugin but would process the entire content on saving.

[iamonlythird]

Unbelievable. The plugin posted above worked until a few days ago, I have got a couple of post submissions with

<span style="line-height: 1.5em;">

Inserted all over.

Is there any way we can adjust this plugin to remove these? Maybe this particular case, there are characters which the plugin is not looking for, like single/double quotation marks etc...

[itsmicks]

Is there any way we can adjust this plugin to remove these? Maybe this particular case, there are characters which the plugin is not looking for, like single/double quotation marks etc...

It looks like what you posted should be caught by the plugin. If you take a look at the strip_n_save function in it and compare it to what's coming through your system -- perhaps you may need to add one more str_replace.

The good news is -- this issue seems solved in 3.9 (Beta 3). I've been playing around with it for a few hours in Chrome and have yet to get a <span> insertion. Guess the TinyMCE upgrades covered this!

[iseulde]

#28044 was marked as a duplicate.

[iseulde]

I think this is taken care of well by the TinyMCE paste plugin now. If I'm wrong, please don't hesitate to reopen, but add some clear steps to reproduce the issue.

[Mr. Z]

This is still a problem.

The plugin written by lumpysimon is a workaround, but spans with style="line-height: 1.5;" or style="line-height: 1.5em;" continue to get added for no apparent reason.

Also, I rewrote the function to be:

function strip_n_save( $post_id, $post ) {
		if ( $this->no_recursion )
			return;
		$search_for = array(' style="line-height: 1.5em;"', ' style="line-height: 1.5;"');
		$post_data = array(
			'ID'           => $post_id,
			'post_content' => str_replace( $search_for, '', $post->post_content )
			);
		$this->no_recursion = true;
		wp_update_post( $post_data );
		$this->no_recursion = false;
	}

[iamonlythird]

Mr. Z's fix works fine. Thank you very much for posting. Although this issue should be solved on a core level if you've ask me.

[azaozz]

Replying to iamonlythird:

This doesn't happen in 4.1 any longer. All inline styles are stripped on pasting when using the default editor configuration.

As stated above this depends on the current styles in the editor. The actual bug is in Chrome/Safari. There is no way to allow some inline styles and remove other, as the editor styles vary (depending on editor-style.css in the theme).

[ddarby14]

Unfortunately, we are seeing this problem again in 4.2, on Mac with Safari. Seemingly random <span> wraps around text with line-height:1.5em

We have resorted to db stripping to filter out the unwanted tags/styles, but they still continue to appear.

[robrecord]

I am still seeing this bug.

[azaozz]

The block editor doesn't use contentEditable any more. Thankfully this fixes all these unwanted inline styles inserted by Chromium based browsers.