This is a migrated thread and some comments may be shown as answers.

CssFiles don't work when RadEditor inside RadWindow

6 Answers 127 Views

Editor

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

answered on 17 May 2012, 02:09 PM

CssFilesTest.zip

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

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.

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:

<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>

Accepted

answered on 21 May 2012, 12:59 PM

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.

var style = editor.get_contentArea().style;

style.backgroundImage = "none";

style.backgroundColor = "white";

style.color = "blue";

Kind regards,
Rumen
the Telerik team

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.

$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>