Articles in this section
Category / Section

How can I perform Mathematical calculation in RichTextEditor?

2 mins read

Description

To perform mathematical calculations in the ASP.NET RichTextEditor by using the CustomTool.

Solution

Since 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:&lt;/b&gt;&lt;/p&gt;&lt;p&gt;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. &lt;/p&gt; 
    </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>
  • Define the DialogBox content to be displayed on clicking the CustomTool button. Once the CustomTool button is created, define its Action to open the corresponding Dialog by using the show() API in the client side script.
  • Perform the desired mathematical operation in the Dialog and insert the resultant value to the RTE by using the executeCommand(commandname,value) method. Refer to the following code.

 

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.

 

Model Dialog to perform calculations on clicking the CustomTool button

Figure 1: Model Dialog to perform calculations on clicking the CustomTool button

Result added to the RTE Content at the cursor position and dialog closed

Figure 2: Result added to the RTE Content at the cursor position and dialog closed


Note

A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.

The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.

You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied