WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 7 months ago

#26975 reopened defect (bug)

TinyMCE adding inline line-height styles and spans

Reported by: lumpysimon Owned by:
Milestone: Awaiting Review Priority: normal
Severity: major Version: 3.8
Component: TinyMCE Keywords:
Focuses: Cc:

Description

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.

Attachments (1)

wp-tinymce-inline-styles.png (13.7 KB) - added by lumpysimon 4 years ago.
Screenshot showing inline styles and spans

Download all attachments as: .zip

Change History (23)

@lumpysimon
4 years ago

Screenshot showing inline styles and spans

#1 @lumpysimon
4 years ago

Example of old similar ticket marked as fixed: #17154

#2 @azaozz
4 years ago

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.

#3 follow-up: @lumpysimon
4 years ago

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

#4 @azaozz
4 years ago

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

#5 @lumpysimon
4 years ago

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.

#6 in reply to: ↑ 3 @Mr. Z
4 years ago

Replying to lumpysimon:

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

#7 @Mr. Z
4 years ago

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!

#8 follow-up: @SergeyBiryukov
4 years ago

Previously: #17154, #23461, #24155.

Seems like [24211] should have fixed this?

#9 in reply to: ↑ 8 @lumpysimon
4 years ago

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

#10 @iamonlythird
4 years ago

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.

#11 @itsmicks
4 years ago

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.

#12 @azaozz
4 years ago

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.

#13 follow-up: @iamonlythird
4 years ago

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

#14 in reply to: ↑ 13 @itsmicks
4 years ago

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!

#15 @iseulde
3 years ago

#28044 was marked as a duplicate.

#16 @iseulde
3 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed
  • Version changed from 3.8.1 to 3.8

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.

#17 @Mr. Z
3 years ago

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;
	}

#18 follow-up: @iamonlythird
3 years ago

  • Resolution worksforme deleted
  • Severity changed from normal to major
  • Status changed from closed to reopened

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.

#19 in reply to: ↑ 18 ; follow-up: @azaozz
3 years ago

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

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

#20 in reply to: ↑ 19 @ddarby14
3 years ago

Unfortunately, we are seeing this problem again in 4.1.1, 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.

Last edited 3 years ago by ddarby14 (previous) (diff)

#21 @robrecord
8 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

I am still seeing this bug.

#22 @SergeyBiryukov
7 months ago

  • Milestone set to Awaiting Review
Note: See TracTickets for help on using tickets.