RadEditor adds span tags around text

[Geoff]

Hi,
    I'm getting occasional unwanted behaviour from the RadEditor control. It is adding span tags with a background style around text like this:

<span style="background-color: #f0efef;">Broadband not working</span>

The user just entered the text "Broadband not working" into the control and the tags were added before the data was saved to the DB. [Note: the #f0efef; colour is the background colour for the control].

When the edit screen is closed, the text is displayed in a RadGrid, which has been styled to have a very dark grey background with white text on it. When this problem occurs, the white text on a (near) white background makes it unreadable.

This problem happens just on the odd occasion and I have not been able to reproduce the effect deliberately. It has happened to me but when I retraced my steps, it didn't happen again. This has generated a number of complaints from our users but I can't figure out what is causing the problem. Can anyone help?

[Ianko]

Hi  Geoff,

Such issue is known only with old versions of the RadEditor control. The mentioned behavior should be reproducible on pasting content under Chrome, although I can only make assumptions about the exact reason without any further details.

The possible solution is to clear all CSS references that are being attached to the content area of the editor, but I would suggest providing more details about the used RadEditor configuration and the exact version of the Telerik UI for ASP.NET AJAX suite. Also I would need the approach used to style the content area of the editor, so that I could recommend a proper approach for this matter.

Regards,
Ianko
Telerik

 

 

[Geoff]

Ianko,
    Many thanks for your prompt reply, I now know a little more. Firstly we have the 2013 quarter 2 version of Telerik. This was the version in existence when we started our project and we decided that we wouldn't upgrade during development and risk introducing a problem.

Secondly, I now know how to reproduce the problem. It happens only when existing (saved) data is edited and then only if the existing text is completely deleted using the mouse to highlight the text before deleting. If the keyboard is used to delete, everything is fine.

The controls are styled with the 'Metro' skin but we also have a style sheet for other elements on the page. Specifically, we have a page 'body' background colour (#f0efef) that is definitely also being picked up as the RadEditor's background colour and is the background colour of the unwanted span element around our text.

What's your best suggestion for tackling this problem?

[Geoff]

Almost forgot, this problem does not occur in Chrome or Firefox but does occur in IE8 and IE11. We are using IE8 specifically because our client is locked into this version for some time to come.

[Geoff]

Just replying to myself one more time. As it was a fairly obvious first step, I tried removing the #f0efef background colour from the page 'body'. This seems to cure the problem. I would prefer not to have to do this but the solution is good enough.

The question that comes to my mind is: Why does the RadEditor pickup the body background colour for its own background? The other Rad controls don't seem to do this.

[Ianko]

Hello Geoff,

As I expected removing the custom stylization is resolving the issue, although I can only make assumption how this stylization is achieved and due to that I cannot provide a firm suggestion to resolve this.

I can only assume that the body element is styled with a CSS rule directly through the main page, which is not a correct approach. If this is the case, please follow this materials and see if they can help you to use the desired stylization and resolve the issue:

• Editor - Customize Content Area;
• Setting Editor Background and Color;
• Setting Content Area Defaults;
• Content Area Custom Stylization;

If you are unable to handle this, I would need a simple, locally runnable project, which demonstrates the problem so that I could investigate the specific scenario on my end.

Regards,
Ianko
Telerik

 

 

[Geoff]

Ianko,
Apologies for the very late response. Removing CSS styles for the body element did the trick for me so thank you for all your efforts and thanks for the extra info provided.

Regards

Geoff

[Marina]

Hello Lanko,
>> The mentioned behavior should be reproducible on pasting content under Chrome
What do you mean? _should be reproducible_ - is it expected? do you have a fix for this? I am able to reproduce the problem on your Demo. Could you provide with solution for the issue?

[Marina]

Please see the following video for more details - http://screencast.com/t/yU1vccKbmu0c.
Thank you in advance.

[Ianko]

Hi Marina,

When copying content from sources where the content is styled with some predefined formatting the browser would paste them along with the content. This is not a matter encountered only in Chrome. The issue discussed in this thread is about inheritance of CSS styles from the main page and this is expected, as long as the browser attaches styles automatically on some user actions. The possible resolution is the proper configuration of the RadEditor default stylization as stated in my previous post.

In your case I see that the content is directly pasted styles with some decorations. That is a normal land expected behavior. Of course you can further configure the RadEditor to strip CSS styles by setting the StripFormattingOptions property as in this example markup:

<telerik:RadEditor runat="server" ID="RadEditor1" StripFormattingOptions="MSWordNoMargins, ConvertWordLists, Css"></telerik:RadEditor>

Also, you can further use the Stripping Tools to strip the undesired decorations in the pasted content.

More details and demonstrations regarding pasting and stripping are available in the Cleaning MS Word Formatting online demo.

Regards,
Ianko
Telerik

 

 

[Marina]

Thank you very much for clarification and your time.;) Have a good day.