How to get a text element where the click was?

[Yuliia]

Hello! I use DocumentEditorComponent.

I want to get a text element that the user has clicked on. I need it in a few cases. One of them: I want to change the context menu depending on the clicked text element.

Thanks!

[Kurthis Banu Abdul Majeeth]

Hi Yuliia, 

You can get the selected text using below code snippet. 

Code snippet: 

this.container.documentEditor.selection.text; 

Documentation Link: 

https://ej2.syncfusion.com/react/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode 

Regarding:  I want to change the context menu depending on the clicked text element. 

Document Editor allows you to add custom option in context menu. It can be achieved by using the addCustomMenu() method and custom action is defined using the customContextMenuSelect.Kindly refer the below sample . 

Sample Link: 

https://stackblitz.com/edit/react-gvgxrw?file=index.js 

Documentation Link: 

https://ej2.syncfusion.com/documentation/document-editor/how-to/customize-context-menu/ 

Please let us know if you have any questions. 

Regards, 

Kurthis Banu A. 

[Yuliia]

Thanks!

this.container.documentEditor.selection.text  

It is about the selected text. But what about the clicked text?

[Kurthis Banu Abdul Majeeth]

Hi Yuliia,  

Regarding: But what about the clicked text? 

Kindly refer the below code snippet to achieve your requirement. 

Code snippet:  

var startOffset = containerInstance.documentEditor.selection.startOffset; 

var endOffset   = containerInstance.documentEditor.selection.endOffset; 

 

container.documentEditor.selection.selectCurrentWord(); 

 

var text = this.container.documentEditor.selection.text;    // you can customize based on your requirement. 

 

// You can set cursor position to anywhere in the document via select API of selection module. 

 

container.documentEditor.selection.select(startOffset, endOffset) ; 

 

 

 

Documentation Link: 

https://ej2.syncfusion.com/react/documentation/api/document-editor/selection/#selectcurrentword 

https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#select 

https://ej2.syncfusion.com/documentation/api/document-editor/selection/ 

Please let us know if you have any questions. 

Regards, 

Kurthis Banu A.