How could I accomplish this?
6 Answers, 1 is accepted
<Telerik:RadEditor ID="txtContent" runat="server" Width="450px" Height="300px" |
ContentAreaCssFile="~/assets/css/radeditor.css"> |
the CSS file looks like this...
body |
{ |
background-color: #FFF !important; |
color: #000 !important; |
} |
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.
<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> |
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; |
} |
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
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.