RadEditor text color issue

2 posts, 1 answers
  1. Christian
    Christian avatar
    16 posts
    Member since:
    Nov 2008

    Posted 08 Apr 2015 Link to this post

    Hello guys,I have a problem with a text color in radEditor. Setting an html to radEditor content on code behind, on UI a part of the text appears in color green despite the fact that no green color is reffered in style, there is only "color:inherit" for a span.  

    It is easy to reproduce. Here is the test case for you :          

    <telerik:RadEditor ID="txtNotes" runat="server" EditModes="Design" Width="900px" BorderWidth="1"
                    Height="420px" ContentAreaMode="Div"
                    NewLineMode="Br" EnableTrackChanges="false" StripFormattingOnPaste="NoneSupressCleanMessage">
                    <ExportSettings OpenInNewWindow="true">
                    </ExportSettings>
                </telerik:RadEditor>

    I attached a pict with the resulting UI . Bellow you have  the html code. The only modification we are doing is that we are extracting the body content from html  and set it to radEditor like this :txtNotes.Content = bodyText from file ;

     

    HTML CODE FOR RADEDITOR: 

    ?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML><HEAD>  <STYLE type=text/css> P, UL, OL, DL, DIR, MENU,  PRE { margin: 0 auto;}</STYLE>    <META name=GENERATOR  content="MSHTML 8.00.6001.19298"></HEAD>   <BODY leftMargin=1 rightMargin=1 topMargin=1><strong><em>02/25-<span style="color: inherit; line-height: 1;">Any new developments on this I-Lead? There has got to be a
    way we can secure this business with all that activity in Sunnyvale and the
    relationships we have.</span></em></strong>
    <p class="MsoNormal"><strong><em></em></strong></p>
    <p class="MsoNormal"><strong><em>Let&rsquo;s work together to make this happen at the right rate
    and stay pattern!!!</em></strong></p></BODY></HTML>

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 08 Apr 2015 Link to this post

    Hi Christian,

    I feel obliged to start with noting that it is always recommended to use valid XHTML, while the provided snippet is invalid. You can use a tool like this for validation: http://validator.w3.org/.

    As for the green color - the issue stems from the fact browsers color a font tag with an "inherit" color like this:

    <font color="inherit">lorem ipsum.</font>

    I am attaching a screenshot that illustrates this. It seems browsers interpret the word "inherit" as a color name.

    This affects you because the editor works with font elements, so the span tag becomes a font element when it has a color applied.

    The easiest workarounds I can offer are:

    • remove the color: inherit rule from the original HTML if possible
    • OR, add the following CSS rule to your page to prevent this browser behavior:

      font[color="inherit"]
      {
          color: black;
      }


    Regards,

    Marin Bratanov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top