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:
- 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> - 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!
About Hardono
