I have the following RadEditor:
The css inside StyleSheet.css is applied to the content of the RadEditor as expected. However, when this RadEditor is placed inside a RadWindow the css doesn't work.
How can I get the css to work when the RadEditor is inside a RadWindow?
<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>The css inside StyleSheet.css is applied to the content of the RadEditor as expected. However, when this RadEditor is placed inside a RadWindow the css doesn't work.
How can I get the css to work when the RadEditor is inside a RadWindow?
6 Answers, 1 is accepted
0
Hi,
I tried to reproduce the reported issue, but without success. For your convenience I have recorded a video demonstrating my test http://screencast.com/t/P3QcVzebxHzU and my project files.
Let me know if I am missing something.
All the best,
Rumen
the Telerik team
I tried to reproduce the reported issue, but without success. For your convenience I have recorded a video demonstrating my test http://screencast.com/t/P3QcVzebxHzU and my project files.
Let me know if I am missing something.
All the best,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Dean
Top achievements
Rank 1
Rank 1
answered on 17 May 2012, 11:14 PM
Ahh, thank you for that. Indeed there is something missing. The stylesheet in my example (I should have posted it's contents, sorry) has just this:
So I was expecting the text in my RadEditor to be blue as soon as it loaded - before having to apply a style using the RadEditor's menu.
Let me know if this helps with reproducing the issue.
Cheers
Dean
body { color: blue; }So I was expecting the text in my RadEditor to be blue as soon as it loaded - before having to apply a style using the RadEditor's menu.
Let me know if this helps with reproducing the issue.
Cheers
Dean
0
Hi,
I set the body class and it was applied in the content area of RadEditor as shown in the following video: http://screencast.com/t/ZsMpDMYY. Am I missing something?
Greetings,
Rumen
the Telerik team
I set the body class and it was applied in the content area of RadEditor as shown in the following video: http://screencast.com/t/ZsMpDMYY. Am I missing something?
Greetings,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Dean
Top achievements
Rank 1
Rank 1
answered on 20 May 2012, 11:37 PM
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:
Moving the javascript fixes the issue as you can see here:
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>0
Accepted
Hello,
Thank you for the code sample.
The CssFiles does not work, because the onParentNodeChaged method recreated the iframe content area of RadEditor which overwrite the <link> tag pointing to the CSS file specified by the CssFile property. That is why it is recommended to programmatically set the content area styles, e.g.
Kind regards,
Rumen
the Telerik team
Thank you for the code sample.
The CssFiles does not work, because the onParentNodeChaged method recreated the iframe content area of RadEditor which overwrite the <link> tag pointing to the CSS file specified by the CssFile property. That is why it is recommended to programmatically set the content area styles, e.g.
var style = editor.get_contentArea().style;style.backgroundImage = "none";style.backgroundColor = "white";style.color = "blue";Kind regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Dean
Top achievements
Rank 1
Rank 1
answered on 21 May 2012, 11:37 PM
OK, so moving my JavaScript below the RadWindow merely stopped it from working - I can see with Firefox Firebug that the ClientID in the following snippet is blank which meant it couldn't find the editor and execute onParentNodeChanged.
Could this be looked at to be fixed in a future release so that the CssFiles are not lost when onParentNodeChanged is called? Because in practice the css files I need to use with the RadEditor are quite large and it's not practical to programmatically set all the style properties like you've demonstrated.
In the meantime I've come up with the following work around so that css file links are added after onParentNodeChanged is called. It could be further enhanced so that it gets the list of CssFiles from the RadEditor before calling onParentNodeChanged and then re-adds them afterwards. At the moment you have to manually add the list of css files yourself. I hope this helps someone:
$find('<%# RadWindow1.ContentContainer.FindControl("RadEditor1").ClientID %>');Could this be looked at to be fixed in a future release so that the CssFiles are not lost when onParentNodeChanged is called? Because in practice the css files I need to use with the RadEditor are quite large and it's not practical to programmatically set all the style properties like you've demonstrated.
In the meantime I've come up with the following work around so that css file links are added after onParentNodeChanged is called. It could be further enhanced so that it gets the list of CssFiles from the RadEditor before calling onParentNodeChanged and then re-adds them afterwards. At the moment you have to manually add the list of css files yourself. I hope this helps someone:
<head runat="server"> <title></title> <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> <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"; //Add the css files after they've been removed by onParentNodeChanged $(editor.get_document()).ready(function () { setTimeout("AddCssFiles('" + editor.get_id() + "')", 1000); }); } function AddCssFiles(editorId) { var editor = $find(editorId); var temphead = $(editor.get_document()).find('head'); var head = temphead[0]; var $head = temphead.eq(0); //remove other css files - get's rid of inherited css files $head.find('link').remove(); var cssLink = document.createElement("link"); cssLink.type = "text/css"; cssLink.rel = "stylesheet"; cssLink.href = "StyleSheet.css"; head.appendChild(cssLink); } </script></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager> <div> <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientShow="OnClientShow"> <ContentTemplate> <div id="editorWrapper" style="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>