)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How can I perform Mathematical calculation in the RichTextEditor?

Platform: ASP.NET Web Forms |
Control: RichTextEditor |
Published Date: April 21, 2015 |
Last Revised Date: May 7, 2019

Description

To perform mathematical calculations in the 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>
        &lt;p&gt;&lt;b&gt;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

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon