We can set the editor background and font color by using one of the following methods:
- Changing the default background color and font color of Telerik RadEditor via CSS:
Telerik RadEditor is a composite control and its content setting is controlled through an external css file.
To set the editor background and color you need to define global body css class in the ..\RadControls\Editor\Skins\<your skin folder>\EditorContentArea.css file
body
{
background-color: red !important;
color: white !important;
padding:3px;
background-image: none;
margin: 0px;
text-align: left;
scrollbar-face-color: #E9E9E9;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #E9E9E9;
scrollbar-3dlight-color: #DBDBDB;
scrollbar-arrow-color: #787878;
scrollbar-track-color: #F5F5F5;
scrollbar-darkshadow-color: #AEAEAE;
word-wrap: break-word;
}
Please, note the use of the !important attribute after the values of some properties.
Since the EditorContentArea.css is loaded first on purpose, it is possible for another global style to override its settings. If you want to prevent the overriding of the properties defined in the EditorContentArea.css file just set the !important attribute after their values.
Save the file and open a fresh browser window to see the changes.
Changing the default background color of Telerik RadEditor on the Server:
Here we use a literal control to change the default content color and background:
| ASPX |
 Copy Code |
|
<HEAD>
<style>
<asp:Literal id="styleSheet" runat="server"></asp:Literal>
</style>
</HEAD> |
| C# |
Copy Code |
|
protected Literal styleSheet;
styleSheet.Text = ".RadEContent, .RadEContentBordered{color: red;background-color: black;}"; |
| VB.NET |
Copy Code |
|
Protected styleSheet As Literal
styleSheet.Text = ".RadEContent, .RadEContentBordered{color: red;background-color: black;}" |
Changing the default background color of Telerik RadEditor on the Client:
Another approach to customize the appearance of the editor's content area is by using the GetContentArea() Javascript method. Here is an example:
| ASPX |
Copy Code |
|
<script type="text/javascript">
function OnClientLoad(editor)
{
var style = editor.GetContentArea().style;
style.backgroundColor = "black";
style.color= "red";
style.fontFamily= "Arial";
style.fontSize= "15";
}
</script>
<rad:RadEditor id="RadEditor1" Runat="server" OnClientLoad="OnClientLoad"></rad:RadEditor> |
Please make sure that the background-color, color and font properties are not set in the .RadEContent, .RadEContentBordered classes in the ~/RadControls/Editor/Skins/Used_Skin/EditorContentArea.css file.
See Also