RadEditor adds span tags around text

11 posts, 1 answers
  1. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 26 Mar 2014 Link to this post

    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?
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 27 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 28 Mar 2014 in reply to Ianko Link to this post

    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?
  5. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 28 Mar 2014 in reply to Geoff Link to this post

    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.
  6. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 28 Mar 2014 in reply to Geoff Link to this post

    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.
  7. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 28 Mar 2014 Link to this post

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

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  8. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 30 Apr 2014 in reply to Ianko Link to this post

    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
  9. Marina
    Marina avatar
    3 posts
    Member since:
    Nov 2013

    Posted 24 Jun 2014 in reply to Ianko Link to this post

    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?
  10. Marina
    Marina avatar
    3 posts
    Member since:
    Nov 2013

    Posted 24 Jun 2014 in reply to Ianko Link to this post

    Please see the following video for more details - http://screencast.com/t/yU1vccKbmu0c.
    Thank you in advance.
  11. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 25 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. Marina
    Marina avatar
    3 posts
    Member since:
    Nov 2013

    Posted 25 Jun 2014 in reply to Ianko Link to this post

    Thank you very much for clarification and your time.;) Have a good day.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017