How i can select pasted content in document editor and do some operation on it.

[Yogesh]

Hello,

How can I select and retrieve content after pasting it using the following?

this.editorObj.documentEditor.editor.paste(result);

Here, result is SFDT text, which I obtained from an API that converts HTML to SFDT.

Additionally, I want to replace certain parts of the pasted content. For example:

"Hello, I am <<name>>."

In this case, I want to replace <<name>> with 'Yogesh'.

[Dhanush Sekar]

Hi Yogesh,

To retrieve the pasted text, please follow these steps:

1. Before pasting the content, record the selection start offset.

//Get the start index of current selection
    let startOffset: string =
      this.container.documentEditor.selection.startOffset;

2. After the paste operation, note the selection end offset.

//Get the end index of current selection
    let endOffset: string = this.container.documentEditor.selection.endOffset;

3. Use the select method to highlight the content by providing the start and end offsets.

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

4. You can extract the selected content either as plain text or as an SFDT string.

    // To get the selected content as text
    let selectedContent = this.container.documentEditor.selection.text;

Documentation: Move Selection to a Position in Angular Document Editor | Syncfusion

Retrieve the bookmark content as text in Angular Document editor component | Syncfusion

To replace text, you can follow this method:

1. Obtain the selected content as a plain text string and replace the <<name>> placeholder with "yogesh." After making the replacement, insert the modified string using the insertText method.

Please note that when you retrieve the selected content as plain text and insert it, the content formatting will be lost.

Due to this limitation, this approach may not be ideal. Instead, consider using the Document Editor's find and replace functionality. For more information, please refer to the documentation below.

this.container.documentEditor.search.findAll ('<<name>>');
// Replace all the searched text with word 'Mike'
this.container.documentEditor.search.searchResults.replaceAll("yogesh");

Find and replace in Angular Document editor component | Syncfusion

Regards,

Dhanush Sekar

[Yogesh]

Thanks Dhanush Sekar,

Is there any way I can search only within the inserted content and then perform a find and replace?

[Dhanush Sekar]

Hi Yogesh,

Document Editor contains a find API which will return the  immediate occurrence of specified text from cursor position in the document, after inserting content you can use find API to get the immediate occurrence of specified text which is the inserted text.

Sample Code :

//Get the start index of current selection
    let startOffset: string = this.container.documentEditor.selection.startOffset;
    this.container.documentEditor.selection.select(startOffset,startOffset);
    this.container.documentEditor.search.find('<<name>>');
    // Replace the searched text with word 'yogesh'
    this.container.documentEditor.search.searchResults.replace("yogesh");

Note: To implement the above solution, the text must be replaced sequentially. If the selection moves forward to the next instance, it will not search for the text preceding this point.

Regards,

Dhanush S