Thanks Rumen. Moving my javascript from the <head></head> of the page to after the RadWindow fixes the issue. I don't really understand why this makes a difference - would you be able to provide an explanation?
My code that doesn't work:
<
head
runat
=
"server"
>
<
title
></
title
>
<
script
type
=
"text/javascript"
>
function OnClientShow(sender, args) {
// Fix the size problem in IE.
var editorParent = $get('editorWrapper');
editorParent.style.display = '';
// Fixes the problem with the content area in FF and Safari
//The content template is an INaming container, so the editor should be found by using FindControl
var editor = $find('<%# RadWindow1.ContentContainer.FindControl("RadEditor1").ClientID %>');
//Uncomment following line to get the fix working
editor.onParentNodeChanged();
var style = editor.get_contentArea().style;
style.backgroundImage = "none";
style.backgroundColor = "white";
}
</
script
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
div
>
<
telerik:RadWindow
ID
=
"RadWindow1"
runat
=
"server"
VisibleOnPageLoad
=
"true"
OnClientShow
=
"OnClientShow"
>
<
ContentTemplate
>
<
div
id
=
"editorWrapper"
style
=
"padding:5px;display:none;"
>
<
telerik:RadEditor
ID
=
"RadEditor1"
runat
=
"server"
EditModes
=
"Design, Preview"
Skin
=
"Outlook"
EnableResize
=
"true"
>
<
CssFiles
>
<
telerik:EditorCssFile
Value
=
"StyleSheet.css"
/>
</
CssFiles
>
<
Content
>
Editor content 1
</
Content
>
</
telerik:RadEditor
>
</
div
>
</
ContentTemplate
>
</
telerik:RadWindow
>
</
div
>
</
form
>
</
body
>
</
html
>
Moving the javascript fixes the issue as you can see here:
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
div
>
<
telerik:RadWindow
ID
=
"RadWindow1"
runat
=
"server"
VisibleOnPageLoad
=
"true"
OnClientShow
=
"OnClientShow"
>
<
ContentTemplate
>
<
div
id
=
"editorWrapper"
style
=
"padding:5px;display:none;"
>
<
telerik:RadEditor
ID
=
"RadEditor1"
runat
=
"server"
EditModes
=
"Design, Preview"
Skin
=
"Outlook"
EnableResize
=
"true"
>
<
CssFiles
>
<
telerik:EditorCssFile
Value
=
"StyleSheet.css"
/>
</
CssFiles
>
<
Content
>
Editor content 1
</
Content
>
</
telerik:RadEditor
>
</
div
>
</
ContentTemplate
>
</
telerik:RadWindow
>
<
script
type
=
"text/javascript"
>
function OnClientShow(sender, args) {
// Fix the size problem in IE.
var editorParent = $get('editorWrapper');
editorParent.style.display = '';
// Fixes the problem with the content area in FF and Safari
//The content template is an INaming container, so the editor should be found by using FindControl
var editor = $find('<%# RadWindow1.ContentContainer.FindControl("RadEditor1").ClientID %>');
//Uncomment following line to get the fix working
editor.onParentNodeChanged();
var style = editor.get_contentArea().style;
style.backgroundImage = "none";
style.backgroundColor = "white";
}
</
script
>
</
div
>
</
form
>
</
body
>