To achieve richer functionality for the control, we changed the Telerik RadEditor editable area from a DIV to an IFRAME element.
This change however, affects the style inheritance behavior of the control. While an editable DIV element is part of the current HTML document, the editable IFRAME element contains its own document context and its own BODY element that does not inherit the styles from the page.
The editor content area has its own css styles applied from the classes placed in the ..\RadControls\Editor\Skins\<your skin folder>\EditorContentArea.css file. To style the elements in the content area you need to define global css classes for them, e.g. body, table, td, th
body
{
font-family: Arial !important;
font-size: 10px !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 restart your browser to see the changes.
When the editor is placed in non-editable mode, then the editor outputs its content in a DIV element that inherits the page styles, but not the styles from the classes defined in the EditorContentArea.css file. That's why the content looks different in edit and non-edit modes, because it does not inherit any more the styles from the EditorContentArea.css file.
There are several ways to apply the same font settings in Editable and Non-Editable modes:
- Set the preferred font settings for the editable content area in the .RadEContent, .RadEContentBordered classes as it is shown in the Description part of the article, for example: font-family: Tahoma; font-size: 14px; color: red;
The next step is to wrap the editor in some container HTML element such as a DIV or a SPAN. Set the style attribute of the SPAN to the same font setting specified in the .RadEContent, .RadEContentBordered classes:
| ASPX |
 Copy Code |
|
<span style="font-family: Tahoma; font-size: 14px; color: red;">Sample Content Inside the DIV element
<rad:RadEditor ID="RadEditor1" Runat="server" SaveInFile="true">Sample Content Inside the Editor</rad:RadEditor>
</span> |
- Another way is to inherit the css styles settings of the parent element of the editor when the editor is in Editable mode. Thus the content will look identically in Edit and Non-Editor modes:
Set the OnClientLoad property of RadEditor to a client-side function, which will apply the parent formatting (e.g. "copyParentStylesToEditor")
Add the copyParentStylesToEditor function before the RadEditor declaration (the function name should be the same as the value of the OnClientLoad property):
| ASPX |
Copy Code |
|
<script type="text/javascript">
function copyParentStylesToEditor(editor)
{
var theIFrame = document.getElementById("RadEContentIframe" + editor.Id);
var theMainEditorTable = document.getElementById("RadEWrapper" + editor.Id);
var theParentEl = theMainEditorTable.parentNode.parentNode;
var theContentArea = editor.GetContentArea();
for (var attr in theParentEl.currentStyle)
{
theContentArea.style[attr] = theParentEl.currentStyle[attr];
}
}
</script> |
| ASPX |
Copy Code |
|
<span style="font: bold 12px Verdana;color: red;">sample content inside the DIV container
<rad:RadEditor
id="RadEditor1"
runat="server"
SaveInFile="true"
onClientLoad="copyParentStylesToEditor">sample content inside the Editor
</rad:RadEditor>
</span> |
Thus the editor's content area will inherit the inline style="font: bold 12px Verdana; color: red;" applied to the SPAN element and will apply the same font settings to its content in edit and non-edit modes.
A similar approach is to copy the font styles from the editor's parent and apply them to the contents of the editor. The result, wherever the editor resides, those are the font settings it will take on. The solution is tested in IE 6, Firefox 1.5, and Opera 9.
| ASPX |
Copy Code |
|
<script type="text/javascript">
function CopyStylesToEditorHelper(element)
{
if (element.currentStyle) // Handle IE
return element.currentStyle;
else // Handle Others
return document.defaultView.getComputedStyle(element,null);
return null;
}
function CopyStylesToEditor(editor)
{
var theIFrame = document.getElementById("RadEContentIframe" + editor.Id);
var theDocBody = editor.Document.body;
var IFrameCompStyle = CopyStylesToEditorHelper(theIFrame);
if (IFrameCompStyle != null)
{
theDocBody.style.fontFamily = IFrameCompStyle.fontFamily;
theDocBody.style.fontSize = IFrameCompStyle.fontSize;
theDocBody.style.fontWeight = IFrameCompStyle.fontWeight;
theDocBody.style.lineHeight = IFrameCompStyle.lineHeight;
}
}
</script>
<span style="font: bold 12px Verdana;">
<rad:RadEditor runat="server" id="TextEditor" onClientLoad="CopyStylesToEditor">test</rad:RadEditor>
</span> |
Note that we only copy the Font Family, Size, Weight, and Line Height, but other font properties can be copied too by adding the respective javascript code.
- You can also set the CssFiles property to point to an external css file that will apply the default font to the content area. You can review the following online example for more information: Styles and External Css Files.
See Also