Each browser has a default font, which is used by the page when there is no style set to any of the objects on the page. It is set from Tools -> Internet Options -> General -> Fonts.
The Rich Text Content Area of Telerik RadEditor is an IFRAME element, which is a separate document with its own css styles. The editor loads the CSS classes from the EditorContentArea.css file in the RadControls/Editor/Skins/<Used_Skin>/ folder, followed by the CSS styles from the parent page [or from external css files if CssFiles property is used].
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.
Once you submit the content and the editor switches to non-editable mode (Editable="false" or HasPermission="false"), the editor content is outputted in a DIV element on the page. If the editor was placed in some container elements prior to submitting the content, after you submit the content, the DIV containing the outputted HTML code in non-edit mode will inherit the css formatting of its parent.
 |
The versions of RadEditor prior v7.3 have css styles applied from .RadEContent, .RadEContentBordered classes placed in the ..\RadControls\Editor\Skins\<your skin folder>\EditorContentArea.css file:
.RadEContent, .RadEContentBordered
{
// Here, by adding the following properties, you can change the font and it size accordingly to your needs:
font-family: Arial, Verdana, Tahoma;
font-size: 10pt;
...
} |
See Also