U4-1703 - Issue With Latest Version of Chrome, Richtext Editor and CMS Stylesheets

Created by Tim Payne 13 Feb 2013, 11:58:35 Updated by Shannon Deminick 26 Jun 2017, 05:39:41

It looks like the latest version of Chrome causes an issue with the RichText editor when used in conjunction with a linked stylesheet. This doesn't seem to happen with any other browser and we've only started to see it reported by clients in the last week or so, so I assume it's been caused by a recent chrome update. We've tested this on various versions of Umbraco from 4.5 up to 4.11.4, and it happens in all of them.

To replicate:

Create a stylesheet, assign body, paragraph and a few other styles (in the actual stylesheet body, rather than as sub-items). Ensure that the paragraph style has a font-height set and maybe a few other properties. Assign this stylesheet to your RichText editor. Clear your browser cache, and reload the site. Go to a page that has the RichText editor on in the CMS and add two paragraphs of text. Place the carat at the start of the second paragraph and hit backspace. The paragraphs will merge, but the font of the text that was the second paragraph should have changed appearance. If you view the source, you'll see that a span has been added around the second paragraph's text that has the styles from the paragraph in the CSS file applied to it inline.

If it is an issue with Chrome, there's probably not anything you can do about it, but it might be that there is a fix that can be implemented.

Comments

Tim Payne 14 Feb 2013, 12:02:48

Have noticed a few other CMS's that use TinyMCE have been reporting the same issue over the last week!


Lee Morton 23 Jul 2013, 12:40:38

I've noticed this problem in Chrome (v28) too, with Umbraco 6.1.2. It's wrapping the content in span tags with inline styles whenever you remove some text in a Richtext Editor and then merge paragraphs with the Delete key or if you convert say a series of paragraphs into a numbered list or bullet points. We have the styles for the editor defined as stylesheet properties in Umbraco. Doesn't seem to happen with Internet Explorer 9


Andrew Munro 21 Oct 2013, 17:07:08

Same problem with Chrome 30. It adds "font-size:10px" to every list item automatically.


John Walker 28 May 2014, 15:02:39

One of our clients has been reporting this also. This workaround seems to be working http://ahoj.io/how-to-make-tinymce-to-output-clean-html

<![CDATA[span[!class]]]>


Shannon Deminick 26 Jun 2017, 05:39:42

Closing issue due to inactivity - see blog post for details https://umbraco.com/blog/issue-tracker-cleanup/


Priority: Normal

Type: Bug

State: Closed

Assignee:

Difficulty: Normal

Category: Editor

Backwards Compatible: True

Fix Submitted:

Affected versions: 4.10.0, 4.11.1, 4.11.3, 4.11.4, 6.1.2, 6.2.0

Due in version:

Sprint:

Story Points:

Cycle: