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

Getting Template Manager to replace all HTML in Editor

7 Answers 180 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Danny
Top achievements
Rank 1
Danny asked on 26 Sep 2008, 04:27 PM

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

Sort by
0
Rumen
Telerik team
answered on 30 Sep 2008, 08:14 AM
Hi Timmy,

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 />&nbsp;Switch to Html mode to run the content filter.<br />&nbsp;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.
0
Danny
Top achievements
Rank 1
answered on 04 Oct 2008, 05:19 PM
Rumen,

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
0
Rumen
Telerik team
answered on 06 Oct 2008, 12:42 PM
Hi Timmy,

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 &nbsp; entity before the STYLE tags to prevent the browser for stripping the style tags), e.g.


&nbsp;
<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.
0
Danny
Top achievements
Rank 1
answered on 04 Nov 2008, 02:13 PM

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

0
Rumen
Telerik team
answered on 07 Nov 2008, 10:21 AM
Hi Timmy,

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:

  1. Copy the EditorDialogs installation folder to the root of your web application
  2. 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>
     
  3. 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.
     
  4. 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>
For your convenience I have attached a sample fully working project that demonstrates the solution.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Mike
Top achievements
Rank 2
answered on 27 Mar 2009, 05:48 AM
Hi Rumen,

The above code that you posted on Nov 7, 2008 pastes the HTML twice in the content area of the editor. Is there any way around this? The function works perfectly otherwise and is exactly what we were looking for other than the double pasting of the html.

Cheers
Grant
0
Rumen
Telerik team
answered on 30 Mar 2009, 03:37 PM
Hi Grant,

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.
Tags
Editor
Asked by
Danny
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Danny
Top achievements
Rank 1
Mike
Top achievements
Rank 2
Share this question
or