Customizing Editor Control of AjaxControltoolKit in Asp.Net

Description:- 

As you can know in Ajaxcontroltoolkit lots of tools available in the editor. But sometime we require only few tools to be displayed in this editor. For that we can change the editor and override FillTopToolbar () and FillBottomToolbar () methods of editor control.

For that in the App_code folder we have to add one .cs file. And then add the namespace AjaxControlToolkit.HTMLEditor.

protected override void FillTopToolbar()
{
    TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold());
    TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic());
}

protected override void FillBottomToolbar()
{
    BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode());
    BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode());
    BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.HtmlMode());
}

As you can see here in the bottom toolbar we have added all three modes that is design, preview and html. But from the top we just add bold and italic.

We can use this control in asp.net page same as we use the usercontrol.

Html:-

<div>
   <asp:ScriptManager ID="ScriptManager1" runat="server">
   </asp:ScriptManager>
   <div>
      <custom:customeditor id="CustomEditor1" width="500px" height="200px" runat="server" />
   </div>
</div>

And Register MyControls in Webpage.

<%@ Register Namespace="MyControls" TagPrefix="custom" %>

Create New Webpage in that Register Ajaxcontroltoolkit and Drag ScriptManager and Editor Control.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor" TagPrefix="cc2" %>

<div>
   <asp:ScriptManager ID="ScriptManager1" runat="server">
   </asp:ScriptManager>
   <cc2:Editor ID="Editor1" Height="200" Width="450" runat="server" />
</div>

Author : Umesh Patel

Related Posts