CODEWITHSUNDEEP
c#asp.nettelerikbackground-colorradeditor
zey
zey

Reputation: 6103

How to change rad editor's background color?

Here is the coding for rad editor , 

<telerik:RadEditor ID="RadEditor1" runat="server" AutoResizeHeight="True"
Width="500px" ToolbarMode="Floating">
<Content>
</Content>
<ImageManager EnableAsyncUpload="True" ViewPaths="~/photos" />
<TrackChangesSettings CanAcceptTrackChanges="False"></TrackChangesSettings>
</telerik:RadEditor>

But , my rad editor's background color(1) show the background color of my page(2) . How can I change editor's background color ?

enter image description here

Upvotes: 1

Views: 3293

Answers (2)

Mehdi Bugnard
Mehdi Bugnard

Reputation: 3979

To change the appearance, it's necessary to reference a new style sheet in the RadEditor. Here is an example.

For more information please look here :

http://www.telerik.com/help/aspnet-ajax/editor-setting-editor-background-and-color.html http://www.telerik.com/help/aspnet-ajax/editor-setting-content-area-defaults.html http://www.telerik.com/help/aspnet-ajax/editor-content-area-appearance-problems.html http://www.telerik.com/help/aspnet-ajax/editor-css-classes-and-their-use.html

ASPNET

<telerik:radeditor runat="server" ID="RadEditor1">
 <CssFiles>
     <telerik:EditorCssFile Value="~/EditorContentArea.css" />
 </CssFiles>
</telerik:radeditor>

CSS 

body
{
  background-color: red;
  background-image: url(image_path);
  color: black;
}

ASPX

<telerik:RadEditor
   ID="RadEditor1"
   OnClientLoad="OnClientLoad"
   runat="server">
</telerik:RadEditor>

JAVASCRIPT

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

Upvotes: 2

ajakblackgoat
ajakblackgoat

Reputation: 2149

Set the RadEditor property ContentAreaCssFile to a CSS file. In the CSS file, you can define the style for the content area.

ContentAreaMode must be set to Iframe for this to work though.

<telerik:RadEditor ID="RadEditor1" runat="server" 
    ContentAreaCssFile="ContentAreaCssFile.css" ContentAreaMode="Iframe">
  <Content>

  </Content>
</telerik:RadEditor>

Upvotes: 1

Related Questions