How can I perform Mathematical calculation in the RichTextEditor?

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

• 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

 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