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

Save Button on Editor Toolbar

13 Answers 625 Views
Editor
This is a migrated thread and some comments may be shown as answers.
rdochert
Top achievements
Rank 1
rdochert asked on 23 Oct 2007, 12:02 AM
Hi,
in the previous edition of RadEditor, i had a Save button in the toolbar as the first icon. I added this in the toolsfile. Is there any "tidier" way of implementing a Save function in the new RadEditor. Ideally, i just want a button which will do a postback and maybe raise the RadEditor1.TextChanged event?
In short, what is the reccommended method in prometheus to implement a Save button on the toolbar.
thanks
rob

13 Answers, 1 is accepted

Sort by
0
Petya
Telerik team
answered on 23 Oct 2007, 08:27 AM
Hi rdochert,

With RadEditor Prometheus you can add your own button in the ways presented in this help article. In the handler of the button click you can add code to submit the form, i.e. cause a postback. One more thing - there is no TextChanged event in RadEditor Prometheus.

Greetings,
Petya
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Dave Miller
Top achievements
Rank 2
answered on 26 Oct 2007, 09:12 PM
Petya,

I was wondering if when creating/adding a toolbar in code if it was possible to set its order. I want to add a custom save and cancel button to the default tools file. I would prefer to actually add them to the front of the first toolbar before "Print" and "Spellcheck" but if that is not possible would like to add the new toolbar created in the codebehind before the first toolbar in the default tools file.

Thanks,
Dave
0
Valeri Hristov
Telerik team
answered on 29 Oct 2007, 11:07 AM
Hello Dave,

It is easy to insert the new tool at the beginning of the toolbar:

//in Page_Load
if (!IsPostBack)
{
    RadEditor1.Tools[0].Tools.Insert(0, new EditorTool("MyCustomTool"));
}
 
RadEditor.Tools collection contains EditorToolGroup objects, representing each toolbar, each group contains EditorTool objects, representing each button or dropdown in the toolbar.

Best wishes,

Valeri Hristov (Senior Developer, MCSD)
the Telerik team


Instantly find answers to your questions at the new Telerik Support Center
0
Pierre
Top achievements
Rank 2
Iron
Iron
answered on 03 Dec 2007, 06:56 PM
OK I follow this post, now I got the alert popup when I click on the save Event, that is good. Now how I can jump into code behind with a postback or ajax call to save to database? Its a content page, and I have a AjaxProxyManager avalaible.

Any Suggestion?
0
Rumen
Telerik team
answered on 04 Dec 2007, 10:00 AM
Hi Pierre,

After adding your custom Save button to the editor's toolbar, you should define its JavaScript command.
The command will be executed when the user clicks on the Save button. The idea is to have a hidden Asp:Button with style="display:none;" on the page that will submit the content and save it in database. In the JavaScript command function you should get a reference to the Asp:Button and programmatically click it. Thus when the Save toolbar button is pressed, this will click the hidden Asp:Button and will save the content in the Database.

In your page with the editor (after the <telerik:radeditor ... declaration),  add the following:

<asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;"/>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList["CustomSaveButton"] = function(commandName, editor, args)
{
   
alert("Save In Database");
   var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
    btnSubmit.click(); //click it programmatically

}
;
</script>

In the event handler of the
btnSubmit you should write your code for saving the content in database.

You can use the following demo example as a base to proceed: Save In Database.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
brian26
Top achievements
Rank 1
answered on 14 Jan 2008, 11:06 PM
The example below works good until I try to ajax the editor. Both the button and the editor are located in a asp panel that is has ajax settings assigned to it. Any thoughts? 


<asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;"/>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList["CustomSaveButton"] = function(commandName, editor, args)
{
   
alert("Save In Database");
   var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
    btnSubmit.click(); //click it programmatically

}
;
</script>
0
Rumen
Telerik team
answered on 15 Jan 2008, 09:02 AM
Hi,

I made a test by placing the editor and the asp:button in a MS AJAX UpdatePanel and I was not able to reproduce the problem. You can see my test in the attached video and that the Asp:Label is updated with Ajax request on each Save button click.

Here is the used code:

    <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager" runat="server" />
       <asp:UpdatePanel id="UpdatePanel1" runat="server">
            <ContentTemplate>
                <telerik:RadEditor ID="RadEditor1" runat="server">
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorTool Name="Save" Text="Save"  />
                            <telerik:EditorTool Name="Bold"  />
                            <telerik:EditorTool Name="Italic"  />
                        </telerik:EditorToolGroup>
                    </Tools>
                </telerik:RadEditor>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;" OnClick="btnSubmit_Click"/>
                <asp:Label ID="Label1" runat="server"></asp:Label>
                <script type="text/javascript">
                Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args)
                {
                   alert("Save In Database");
                   var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
                   btnSubmit.click(); //click it programmatically
                };
                </script> 
               
                <script runat="server" type="text/C#">
                protected void btnSubmit_Click(object sender, EventArgs e)
                {
                    Label1.Text = System.DateTime.Now.ToString();
                }
                </script>  
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>

If you scenario is other could you please open a support ticket and send a sample working example that demonstrates the observed behavior on your side?

Best regars,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Darren Hall
Top achievements
Rank 1
answered on 01 Mar 2008, 07:33 PM
Could you please tell me how I might do this if i have multiple editors on the page.  Note that they are in user controls and loaded programatically so that means the javascript gets reproduced every time.  Because of that the function gets overwritten and the save button only works for the last editor loaded.

Thanks.
0
Rumen
Telerik team
answered on 03 Mar 2008, 10:27 AM
Hi Darren,

Here is an example demonstrating how to set a save button to multiple editors and having only one Telerik.Web.UI.Editor.CommandList["Save"] function - the idea behind the solution is to set the javascript code below the UserControls declarations on the page and after that to use the editor argument to get a reference to the editors and obtain their content with editor.get_html() method, e.g.

Default.aspx:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel id="UpdatePanel1" runat="server">
    <ContentTemplate>
        <uc1:WebUserControl ID="WebUserControl1" runat="server" />
        <uc2:WebUserControl2 ID="WebUserControl2_1" runat="server" />
        <uc3:WebUserControl3 ID="WebUserControl3_1" runat="server" />
  
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;" OnClick="btnSubmit_Click"/>
        <asp:Label ID="Label1" runat="server"></asp:Label>
        <script type="text/javascript">
        Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args)
        {
           alert("The Editor ID is: " + editor.get_id() + "\n and has the following content: " + editor.get_html(true));
           var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
           btnSubmit.click(); //click it programmatically
        };
        </script>
     </ContentTemplate>
</asp:UpdatePanel>

WebUserControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

WebUserControl.ascx.cs:

using Telerik.Web.UI;

public partial class WebUserControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RadEditor editor1 = new RadEditor();
        editor1.ID = "RadEditor1";
        editor1.Height = Unit.Pixel(250);
        EditorToolGroup main = new EditorToolGroup();
        editor1.Tools.Add(main);

        EditorTool save = new EditorTool();
        save.Name = "Save";
        save.ShortCut = "CTRL+S";
        main.Tools.Add(save);

        PlaceHolder1.Controls.Add(editor1);
    }
}

You can download a sample runnable project from here.


Greetings,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Darren Hall
Top achievements
Rank 1
answered on 03 Mar 2008, 12:42 PM
Thank you for that, unfortunately I have to keep the javascript and submit buttons within the user controls and so cannot use the method you describe, do you have another option?

Also, where can I see the list of editor methods, I can't seem to find it in the documentation.

Thanks again.

Darren.
0
Rumen
Telerik team
answered on 03 Mar 2008, 01:01 PM
Hello Darren,

What you can do is to put JavaScript function and the ASP:Button in only one of the UserControls for example WebUserControl3.ascx, e.g.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl3.ascx.cs" Inherits="WebUserControl3" %>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;" />
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args)
{
   alert("The Editor ID is: " + editor.get_id() + "\n and has the following content: " + editor.get_html(true));
   var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
   btnSubmit.click(); //click it programmatically
};
</script>

thus the code will be included only once in Default.aspx page.

Another way is to create different commands and custom save buttons for the different editors placed in different user controls:

Telerik.Web.UI.Editor.CommandList["Save1"] = function(commandName, editor, args) ...

Telerik.Web.UI.Editor.CommandList["Save2"] = function(commandName, editor, args) ...

Telerik.Web.UI.Editor.CommandList["Save3"] = function(commandName, editor, args) ...

You can find the RadEditor "Prometheus" client-side methods in the RadControls "Prometheus" help -> Controls ->  RadEditor -> Client-side API Reference -> Methods.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Frank
Top achievements
Rank 2
answered on 08 Jan 2009, 04:20 PM
How do you get the content from the RadEditor in this example with multple editors on the same page?
0
Rumen
Telerik team
answered on 12 Jan 2009, 09:18 AM
Hi Frank,

I am not quite sure whether you want to save the multiple editors' content from an external button or from a button placed on the RadEditor's toolbar. For that reason I wrote two different solutions. Here they are:

Solution 1: The Save button placed on all editors' will get the content of all editors on the page

<telerik:RadEditor ID="RadEditor1" runat="server" >
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Save" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>AAAAA</Content>
</telerik:RadEditor>
<telerik:RadEditor ID="RadEditor2" runat="server" >
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Save" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>BBBBB</Content>
</telerik:RadEditor>
<telerik:RadEditor ID="RadEditor3" runat="server" >
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Save" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>CCCCC</Content>
</telerik:RadEditor>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;" OnClick="btnSubmit_Click"/>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args)
{
     if (typeof ($telerik) != "undefined") {
            if ($telerik.radControls && Telerik.Web.UI.RadEditor) {
                for (var i = 0; i < $telerik.radControls.length; i++) {
                    var control = $telerik.radControls[i];
                    if (Telerik.Web.UI.RadEditor.isInstanceOfType(control)) {
                        //control is a radeditor object
                        alert("The Editor ID is: " + control.get_id() + "\n and has the following content: " + control.get_html(true));
                    }
                }
            }

        }
   var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
   btnSubmit.click(); //click it programmatically
};
</script>

Solution 2: The content of the multiple editors on the page will be obtained by pressing an external Save button:

<input type="button" value="Save Content" onclick="SaveContent();return false" />
<telerik:RadEditor ID="RadEditor1" runat="server" >
    <Content>AAAAA</Content>
</telerik:RadEditor>
<telerik:RadEditor ID="RadEditor2" runat="server" >
    <Content>BBBBB</Content>
</telerik:RadEditor>
<telerik:RadEditor ID="RadEditor3" runat="server" >
    <Content>CCCCC</Content>
</telerik:RadEditor>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;" OnClick="btnSubmit_Click"/>
<script type="text/javascript">
function SaveContent(){
     if (typeof ($telerik) != "undefined") {
            if ($telerik.radControls && Telerik.Web.UI.RadEditor) {
                for (var i = 0; i < $telerik.radControls.length; i++) {
                    var control = $telerik.radControls[i];
                    if (Telerik.Web.UI.RadEditor.isInstanceOfType(control)) {
                        //control is a radeditor object
                        alert("The Editor ID is: " + control.get_id() + "\n and has the following content: " + control.get_html(true));
                    }
                }
            }
        }
   var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
   btnSubmit.click(); //click it programmatically
}
</script>

Greetings,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Editor
Asked by
rdochert
Top achievements
Rank 1
Answers by
Petya
Telerik team
Dave Miller
Top achievements
Rank 2
Valeri Hristov
Telerik team
Pierre
Top achievements
Rank 2
Iron
Iron
Rumen
Telerik team
brian26
Top achievements
Rank 1
Darren Hall
Top achievements
Rank 1
Frank
Top achievements
Rank 2
Share this question
or