DescriptionTo perform mathematical calculations in the RichTextEditor by using the CustomTool. SolutionSince there is no in-built plugin for performing mathematical calculations, you have to use the CustomTool option and customize the tool for the desired math calculations. Syncfusion has prepared a sample by using this custom tool that generates a Dialog box to perform simple mathematical operations and to insert the result to the RTE content. CustomTool dialog box has the NumericTextboxes to enter the data for calculation. Based on the selected operation, the resultant value is added to the RTE content. Follow the steps in the following link to add a CustomTool in the RTE: https://help.syncfusion.com/aspnet/richtexteditor/user-interface#specify-custom-tools Refer to the code block for CustomTool and DialogBox creation.
ASPX <ej:RTE ID="RTECalc" runat="server" ClientIDMode="Static"> <Tools> <CustomTool> <ej:CustomTool Text="Math Calc" Tooltip="Click for calculation" Action="Calculate" /> </CustomTool> </Tools> <RTEContent> <p><b>Description:</b></p><p>The Rich Text Editor (RTE) control is easy to render in client side. You can easily edit the contents and get the HTML content for the displayed content. The rich text editor control provides a toolbar that helps apply rich text formats to the text entered in the text area. </p> </RTEContent> </ej:RTE> <%--Dialog to be displayed on CustomTool Action--%> <ej:Dialog ID="customSourceCode" ClientIDMode="Static" Title="Math Calc" ClientSideOnClose="OnClose" ShowOnInit="false" EnableModal="true" Width="400" runat="server"> <DialogContent> <table> <tr> <td>Data 1</td> </tr> <tr> <td colspan="2"> <ej:NumericTextBox runat="server" ID="num1" ClientIDMode="Static"></ej:NumericTextBox> </td> </tr> <tr> <td>Data 2</td> </tr> <tr> <td colspan="2"> <ej:NumericTextBox runat="server" ID="num2" ClientIDMode="Static"></ej:NumericTextBox> </td> </tr> <tr> <td colspan="2"> <div class="e-rte-button e-fieldseparate"> <ej:Button ID="addition" Type="Button" Text="Add" runat="server" ClientSideOnClick="OnPerformOperation"></ej:Button> <ej:Button ID="multiplication" Type="Button" Text="Multiply" runat="server" ClientSideOnClick="OnPerformOperation"></ej:Button> <ej:Button ID="Close" Type="Button" Text="Cancel" runat="server" ClientSideOnClick="OnPerformOperation"></ej:Button> </div> </td> </tr> </table> </DialogContent> </ej:Dialog>
JavaScript <script type="text/javascript">
function Calculate() {
//Opens dialog.
$("#customSourceCode").ejDialog("open");
}
function OnPerformOperation(args) {
//Calculation for the corresponding math operation.
rteObj = $("#RTECalc").data("ejRTE");
num1 = $("#num1").data("ejNumericTextbox");
num2 = $("#num2").data("ejNumericTextbox");
var result;
switch (args.model.text) {
case "Add":
result = "Sum of " + num1.getValue() + " and " + num2.getValue() + " is " + (num1.getValue() + num2.getValue());
break;
case "Multiply":
result = "Multiplication of " + num1.getValue() + " and " + num2.getValue() + " is " + num1.getValue() * num2.getValue();
break;
}
// Inserts the result to the RTE content.
rteObj.executeCommand("inserthtml", result);
$("#customSourceCode").ejDialog("close"); // Close the dialog
}
</script>
The following screenshot is the output on performing calculations by using the CustomTool.
Figure 1: Model Dialog to perform calculations on clicking the CustomTool button
Figure 2: Result added to the RTE Content at the cursor position and dialog closed |
2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
