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?
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
Thank you very much both for the sample and the explanations.
Excellent job.