Hi,
Previously I used RadEditor for ASP.Net but I'm now implementing RadEditor for ASP.Net AJAX.
I'm trying to get it so that when you select a template in template manager it replaces all the HTML in the editor with the HTML from the selected template.
In RadEditor for ASP.Net I obtained the following from the forums. This worked as required but doesn't in the latest RadEditor. What is the solution now?
Thanks
Tim Metcalfe
<script type="text/javascript">
var templateManagerCommand = RadEditorCommandList["TemplateManager"];
RadEditorCommandList["TemplateManager"] = function(commandName, editor, oTool)
{
templateManagerCommand (commandName, editor, callBackFn);
function callBackFn(result)
{
if (result)
{
editor.SetHtml(result);
};
}
};
</script>
7 Answers, 1 is accepted
Here is the modified code that works with RadEditor for ASP.NET AJAX:
<telerik:radeditor runat="server" ID="RadEditor1">
<TemplateManager ViewPaths="~/files" UploadPaths="~/files" />
<Content>
<strong><br /> Switch to Html mode to run the content filter.<br /> You will see that the casing is changed to upper case.</strong>
</Content>
</telerik:radeditor>
<script type="text/javascript">
var templateManagerCommand = Telerik.Web.UI.Editor.CommandList["TemplateManager"];
Telerik.Web.UI.Editor.CommandList["TemplateManager"] = function(commandName, editor, args)
{
templateManagerCommand (commandName, editor, callBackFn);
function callBackFn(result)
{
if (result)
{
editor.set_html(result);
};
}
};
</script>
Best regards,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Thanks for the reply. However, it is not fully replacing the HTML in the editor with the HTML in the template. If there is CSS specified in the 'head' tag for example then this is lost when it is added to the editor.
Is there anything else I need to specify so that exactly what's in the template is added to the editor without some of the content being lost?
Thanks
Tim
The observed behavior is browser related and it is the browser that keeps only the html inside the body tags. All other HTML, HEAD and BODY tags are automatically removed by the browser.
The workaround is to manually wrap the content inside HTML, HEAD and BODY tags, e.g.
<telerik:radeditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml">
<TemplateManager ViewPaths="~/files" UploadPaths="~/files" />
</telerik:radeditor>
<script type="text/javascript">
function OnClientPasteHtml(sender, args)
{
var commandName = args.get_commandName();
var value = args.get_value();
if (commandName == "TemplateManager")
{
alert(value);
sender.set_html("<html><head></head><body>" + value + "</body></html>");
args.set_cancel(true);
}
}
</script>
You can insert HTML templates with a entity before the STYLE tags to prevent the browser for stripping the style tags), e.g.
<style>
.redColor { color: red; }
</style>
<h2 class="redColor">Welcome to the ASP.NET <SUP><FONT SIZE=-2>TM</FONT></SUP> 2 Platform</h2>
Best regards,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Rumen,
Thanks for the reply. I've tested the earlier code that was used with RadEditor for ASP.Net and it worked as I wanted to, i.e. it retained everything that was in the template including CSS styles in the header.
Was this by design and is there no way we can get the new RadEditor ASP.Net AJAX to operate as described above?
Thanks
Tim
I was able to implement the desired functionality to insert full HTML page content via the Template manager. Here are the steps how to achieve it on your side:
- Copy the EditorDialogs installation folder to the root of your web application
- Set the ExternalDialogsPath property to point to the EditorDialogs folder, e.g.
<telerik:RadEditor ID="RadEditor1" ExternalDialogsPath="~/EditorDialogs"
OnClientPasteHtml="OnClientPasteHtml" runat="server">
<Content>
</Content>
<TemplateManager ViewPaths="~/files" UploadPaths="~/files" />
</telerik:RadEditor>
- Open the \EditorDialogs\TemplateManager.ascx dialog file and modify the getResult function:
getResult : function()
{
if (this._currentItem && this._currentItem.type == Telerik.Web.UI.Widgets.FileItemType.File && this.isValidExtension())
{
//OLD
//this._currentTemplateItem.contentWindow.getElementsByTagName("HTML")[0].innerHTML;
//NEW
var test = "<html>" + document.getElementsByTagName("IFRAME")[0].contentWindow.document.getElementsByTagName("HTML")[0].innerHTML + "</html>";
return test;
}
return null;
},
...
This change will return full html content to the editor on the parent window.
- Since the browser itself will strip the <html>, <head> and <body> tags, we need to capture the supplied content from the Template manager and paste it in the editor with the set_html() method. We can do that by attaching to the OnClientPasteHtml event property of RadEditor, e.g.
<telerik:RadEditor ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml" ExternalDialogsPath="~/EditorDialogs" runat="server">
<Content>
</Content>
<TemplateManager ViewPaths="~/files" UploadPaths="~/files" />
</telerik:RadEditor>
<script type="text/javascript">
function OnClientPasteHtml(editor, args)
{
var commandName = args.get_commandName(); //returns the command name
var value = args.get_value(); //returns the content / value of the fired command
if (commandName == "TemplateManager")
{
editor.set_html(value);
}
}
</script>
Best regards,
Rumen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Please, cancel the event by setting the args.set_cancel(true); inside the if declaration, e.g.
if (commandName == "TemplateManager")
{
editor.set_html(value);
args.set_cancel(true);
}
Kind regards,
Rumen
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.