How To Prevent RadEditor From Inheriting Page's Backgound Image

[jgill]

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?

[Guy]

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.

[Jay]

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.

[jgill]

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>

[Guy]

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;
}

[David Moynagh]

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

[Rumen]

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.