How To Prevent RadEditor From Inheriting Page's Backgound Image

7 posts, 0 answers
  1. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 30 Oct 2009 Link to this post

    I have a page with a RadEditor on it that has a linked CSS file that specifies the page's backgound image.  The RadEditor is inheiriting the page's backgound in the edit window and I would just like the RadEditor to have a white background.

    How could I accomplish this?
  2. Guy
    Guy avatar
    49 posts
    Member since:
    Oct 2007

    Posted 31 Oct 2009 Link to this post

    I have exactly the same problem and tried to use this...
    <Telerik:RadEditor ID="txtContent" runat="server" Width="450px" Height="300px"  
                                        ContentAreaCssFile="~/assets/css/radeditor.css"
    What i am doing is declaring an external css file for the content area of the RadEditor
    the CSS file looks like this...

    body 
        background-color#FFF !important; 
        color#000 !important; 
    However it does not work.  This is the documented solution and i am still looking for the answer. 

    Why would you ever want it to inherit your page background anyway???? bit of an odd design option that i have never seen on any other control of this type.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jay
    Jay avatar
    28 posts
    Member since:
    Apr 2006

    Posted 02 Nov 2009 Link to this post

    I'm having the same problem so hopefully they'll provide us with an answer soon.  I think that the problem is that the content area of the editor is implemented using frames and they inherit the containing pages styling by default.
  5. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 02 Nov 2009 Link to this post

    I could not get the EditorCSS file method to work (see documentation here), but JavaScript worked.

    <script type="text/javascript">  
       function OnClientLoad(editor, args)  
       {  
          var style = editor.get_contentArea().style;  
          style.backgroundImage = "none";  
          style.backgroundColor = "black";  
          style.color= "red";  
       }  
    </script>  

    <telerik:RadEditor  
       ID="RadEditor1" 
       OnClientLoad="OnClientLoad" 
       runat="server">  
    </telerik:RadEditor> 
     
  6. Guy
    Guy avatar
    49 posts
    Member since:
    Oct 2007

    Posted 03 Nov 2009 Link to this post

    i got it to work eventually.

    the problem was that i had a css class assigned to the body of the page that the radeditor is on and this seemed to mess with the stylesheet i had assigned to the radeditor via the ContentAreaCssFile property.

    my ContentAreaCssFile looks like this...

    body 
        background-color#FFF !important; 
        color#000 !important; 
        background-image:none !important; 

  7. David Moynagh
    David Moynagh avatar
    1 posts
    Member since:
    Dec 2003

    Posted 05 Nov 2009 Link to this post

    Had a similar problem with trying to override backgrounds set in the page stylesheet.
    Have a stylesheet that only contains one style definition that I want to use to remove the body background set in the page for the content area of the editor 

     

    body { background-color:#ffffff;  }  
     
     

     

    Found using the ContentAreaCssFile property didn't work to apply this stylesheet to the content area but adding the stylesheet with as a stylesheet item in the CssFiles collection of the RadEditor did work. 

    <telerik:RadEditor ... > 
      <CssFiles>   
        <telerik:EditorCssFile Value="~/RadEditor_ContentAreaStyles.css" />   
      </CssFiles>   
    </telerik:RadEditor>
     

    Funny thing was setting the style sheet in the ContentAreaCssFile worked when I added an empty CssFile item

    <telerik:RadEditor ID="RadEditor" runat="server" ContentAreaCssFile="~/RadEditor_ContentAreaStyles.css" ... >   
      <CssFiles>   
         <telerik:EditorCssFile Value="" />    
      </CssFiles>   
    </telerik:RadEditor> 
     

     

     Haven't investigated this fully as now have a acceptable working solution

  8. Rumen
    Admin
    Rumen avatar
    12847 posts

    Posted 10 Nov 2009 Link to this post

    Hello David,

    When the CssFiles property is set then the editor does not pick up the styles from the parent page.
    So if you set the CssFiles property the background will be white.

    The Rich Text content area of RadEditor is an editable IFRAME element, which is a separate document that has its own CSS styles applied through the embedded in the Telerik.Web.UI.dll skin. This default content appearance in the content area can be easily overridden by setting the editor's ContentAreaCssFile property to point to your own CSS file. For example create a file named EditorContentAreaStyles.css and put a global body tag with the desired font and color settings in it, e.g.

    body 
    {
       font-family: Verdana !important;
       font-size: 18px !important;
       color: #99ff99 !important;
       background-color: #333333 !important;
       text-align: left !important;
       word-wrap: break-word !important;
    }

    Since the css file is loaded first on purpose, it is possible for another global class on the page to override its settings. To prevent the overriding of the properties defined in the EditorContentAreaStyles.css file just set the !important rule after the properties values (or use the editor's CssFiles property to load the css file).

    Save the css file and set the ContentAreaCssFile property to point to it:

    <telerik:RadEditor 
        ContentAreaCssFile="~/EditorContentAreaStyles.css"
        id="RadEditor1" 
        runat="server">
    </telerik:RadEditor>


    Sincerely yours,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017