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. Image for the cookie policy date

Can you please explain how the RTE methods work exactly?

Hello,

I am using the RTE control with a custom toolbar to insert custom characters (+, -, /, *) when some button is clicked and custom words (math variable names: x, y, z, etc) from a dropdownlist. The purpose is to build simple mathematical expressions, e.g.:

(x + y) * z

It seems to work ok, but the control's code is cryptic. For example, here's the code for the dropdownlist:

public onCreate(): void {
this.parametersObj = new DropDownList({
dataSource: this.parameters,
fields: { text: 'code' },
beforeOpen: () => {
// save RTE current cursor position
this.ranges = this.selection.getRange(document);
this.saveSelection = this.selection.save(this.ranges, document);
},
change: (args: any) => {
// restore RTE cursor position to insert parameter in correct position
this.formulaExpressionRteObj.focusIn();
this.saveSelection.restore();
this.formulaExpressionRteObj.executeCommand('insertText', args.value);
}
});
this.parametersObj.appendTo('#parameters');
}

I don't understand what exactly ranges and saveSelection are? How do they work?

(Please, note that the dropdownlist supports filtering and once it is opened the RTE loses focus and the current position).

Let's say I want to wrap a selected part of the mathematical expression in parenthesis by selecting the text and clicking a button. How can this be implemented?

And how can I add undo/redo support in this scenarion? I have tried using formatter without success.

Also, I get mysterious errors when experimenting with some of your suggestions in other threads. For example, if I change:

this.formulaExpressionRteObj.executeCommand('insertText', args.value);

to:

this.ranges.insertNode(document.createTextNode(args.value));


I get error in browser's console:

unable to execute setStart on range. There is no node in position ...


So, can you please provide some insight on how the RTE code works? What range, selection, formatter really mean and how they can be used?



3 Replies 1 reply marked as answer

VY Vinothkumar Yuvaraj Syncfusion Team February 9, 2023 03:35 PM UTC

Hi Dimitris,


We have created a sample based on your requirements that demonstrates the use of the save and restore methods, as well as the use of the saveData method for undo/redo actions. You can find the sample and accompanying video at this link: https://stackblitz.com/edit/angular-zfburu-z31efn?file=src%2Fapp.component.html,src%2Fapp.component.ts


The selection save method is used to preserve the current cursor position before performing some other operation on the text. The method saves the current cursor position, allowing it to later be restored using the restore method. The saveData method is used to perform undo/redo actions.


Please find the below documentation for your reference.

Documentation: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/toolbar#custom-tool

API Link: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#getselection


Regards,

Vinothkumar


Attachment: RTE_Video_58e36c3_4c7eac6d.zip

Marked as answer

DI Dimitris February 19, 2023 08:20 PM UTC

Thank you very much both for the sample and the explanations.

Excellent job.



VJ Vinitha Jeyakumar Syncfusion Team February 20, 2023 05:32 AM UTC

Hi Dimitris,

We are glad to assist you.

Regards,
Vinitha



Loader.
Up arrow icon