browse by category or date

I was tasked to create a proof of concept (POC) utilizing Telerik ASP.NET AJAX RadEditor. The following code will produce the standard RadEditor:

<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" EnableComments="true"
	EditModes="Design"
	Width="800px" Height="800px" OnClientLoad="OnClientLoad"
	DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd">
</telerik:RadEditor>

Here is how it looks on browser:

1. Using Custom Toolbars Instead of Default Toolbars

If we want to use custom toolbar instead of the default one, we can use two methods:

  1. Custom Toolbar using declaration in ASPX page
    <telerik:radeditor runat="server" ID="RadEditor1">
       <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="ApplySizeColor" Text="Apply Size and Color"/>
            <telerik:EditorTool Name="InsertCustomDate" Text="Insert Custom Date"/>
            <telerik:EditorTool Name="ResetContent" Text="Reset Content"/>
        </telerik:EditorToolGroup>
       </Tools>        
    </telerik:radeditor>
    
  2. Custom Toolbar using ToolsFile property in ASPX page and XML file
    ASPX file

    <telerik:radeditor ToolsFile="~/ToolsFile.xml" runat="server" ID="RadEditor2"></telerik:radeditor>
    

    ToolsFile.XML file

    <root>
        <tools name="MainToolbar">
                <tool name="ApplySizeColor" Text="Apply Size and Color"/>
                <tool name="InsertCustomDate" Text="Insert Custom Date"/>
                <tool name="ResetContent" Text="Reset Content"/>
        </tools>
    </root>
    

Both ways will produce the same result:

To customize the button’s icon, add the following CSS:

        .reResetContent.reToolIcon::before {
            content: "\e034";
        }
        .reInsertCustomDate.reToolIcon::before {
            content: "\e108";
        }
        .reApplySizeColor.reToolIcon::before {
            content: "\e50e";
        }

We can see the result of the change:

The key to the customization is command name. For example the command name in the custom toolbar is ApplySizeColor, therefore the CSS is .reApplySizeColor. As for the icons, you can refer to the full list of WebComponentsIcons

2. Add Custom Button into Default Toolbar

protected void Page_Load(object sender, EventArgs e)
{

            RadEditor1.EnsureToolsFileLoaded();

            Telerik.Web.UI.EditorToolGroup main = new Telerik.Web.UI.EditorToolGroup();
            main.Tab = "Changes";
            main.Tag = "Changes";
            RadEditor1.Tools.Insert(0, main);

            Telerik.Web.UI.EditorTool custom1 = new Telerik.Web.UI.EditorTool("CustomSave");
            main.Tools.Add(custom1);
            custom1.Text = "Save";
            custom1.ShowText = true;

            Telerik.Web.UI.EditorTool custom2 = new Telerik.Web.UI.EditorTool("CustomSubmit");
            main.Tools.Add(custom2);
            custom2.Text = "Submit";
            custom2.ShowText = true;
}

Add below CSS to customize the buttons

        .reToolIcon.reCustomSave::before {
            content: '\e109' !important;
        }

        .reToolIcon.reCustomSubmit::before { 
            content: '\e118' !important;
        }

This is how it looks in browser:

Next, let’s add the function handler when this button is clicked:

<script type="text/javascript">
        Telerik.Web.UI.Editor.CommandList["CustomSave"] = function (commandName, editor, args) {
            alert("Custom Save"); 
        };

        Telerik.Web.UI.Editor.CommandList["CustomSubmit"] = function (commandName, editor, args) {
            alert("Custom Submit"); 
        };
</script>

There are plenty of actions on RadEditor which we can trigger using this custom toolbar button. But maybe that’s for another post.

I hope it helps. Cheers!

GD Star Rating
loading...
How To Add Custom Button To RadEditor's Toolbars, 3.0 out of 5 based on 1 rating

Possibly relevant:

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Incoming Search

asp.net, c#, telerik

1 Trackback

 

No Comment

Add Your Comment