External CSS Different Domains

[digitall]

Is it possible to setup RadEditor to pull styles from a different domain? For example, taking your example from the help page:

<telerik:RadEditor runat="server" ID="RadEditor1">
    <CssFiles>
        <telerik:EditorCssFile Value="~/ExternalCssFiles/Styles1.css" />
        <telerik:EditorCssFile Value="~/ExternalCssFiles/Styles2.css" />
    </CssFiles>
</telerik:RadEditor>

Can I do something like this:

<telerik:RadEditor runat="server" ID="RadEditor1">
    <CssFiles>
        <telerik:EditorCssFile Value="http://www.mysite.com/styles/Styles1.css" />
        <telerik:EditorCssFile Value="http://www.mysite.com/styles/Styles2.css" />
    </CssFiles>
</telerik:RadEditor>

If not directly, do you have any recommendations on how I could implement something like this? I'm building a rather large CMS that will control content for multiple sites inside a single area and within the editor I would like for styles that show up to mimic the ones actually on the site being edited.

[Rumen]

Hello,

The css files from other domain scenario is not supported because due to potential vulnerabilities the browser security does not allow the javascript to read the styles from the different domain. You should always load styles from the same domain.

Please, see the following forum thread on the topic: http://www.telerik.com/community/forums/aspnet-ajax/editor/include-only-some-css-styles-in-dropdown.aspx.

All the best,
Rumen
the Telerik team

[digitall]

I had read that thread before posting and had hoped something had changed since then, but I can understand why it didn't. I was able to solve this though and get cross-domain stylesheets to load. The approach I took is linking the editor to an HTTP Handler that was local to my site and passed it a unique identifier (guid) in the query string like so:

this.RadEditor1.CssFiles.Add(new Telerik.Web.UI.EditorCssFile { Value = "~/cms/getstyles.ashx?app=" + this.CurrentApplication.Key.ToString() });

The handler then makes an HTTP web request to the external site to retrieve a specific stylesheet based on the guid in the query string. If a file is returned then the response is written out from the handler and my styles showed up. For those curious, here is the code for the handler:

var request = HttpWebRequest.Create(app.Url + "/_assets/styles/cms.css") as HttpWebRequest;
try
{
    if (request.GetResponse().ContentLength > 0 && request.GetResponse().ContentType == "text/css")
    {
        context.Response.ContentType = "text/css";
        using (var reader = new StreamReader(request.GetResponse().GetResponseStream()))
            context.Response.Write(reader.ReadToEnd());

        context.Response.End();
    }
}
//an empty response is returned for any web exceptions
catch (WebException) { }

The only additional thing I had to do was set the handler to never expire, otherwise subsequent requests to it would pull the cached version and not automatically reload it (such as when a style changes, is added, etc.). To do that, at the top of ProcessRequest(context) I added this:

context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.Cache.SetExpires(DateTime.MinValue);

Hopefully this solution can help anyone else who may need to support external styles!

[Rumen]

Hello,

Thank you for sharing your solution with the community.

If you would like you can create a new code library on the subject and I will award you with Telerik points.

Greetings,
Rumen
the Telerik team