Accessing the content inside the editor programmatically

[Inkz]

Hi,

I just started exploring the DocumentEditor and wonder if the content in the editor, whether imported or typed, can be access through codes. 

For example, I want to highlight certain texts of the imported document automatically and replace it with some other words through codes.

Thank you

[Harini Chellappa]

Hi Nithiphorn, 

Syncfusion Greetings! 

You can achieve this by using our document editor events. 

Once document loaded in document editor, document change event will be fired. 

Likewise, on each typing, content change event will be fired. 

Please refer the below documentations for content change and document change. 

https://ej2.syncfusion.com/react/documentation/api/document-editor-container#contentchange 

https://ej2.syncfusion.com/react/documentation/api/document-editor-container#documentchange 

You can search the text which you want to highlight in document change event or content change event as per your need. 

Please refer the below sample, which highlights the searched text after inserting contents. 

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

Please refer the below documentation for find and replace and text formatting. 

https://ej2.syncfusion.com/react/documentation/document-editor/text-format/?no-cache=1#working-with-text-formatting 

https://ej2.syncfusion.com/react/documentation/document-editor/find-and-replace/#find-and-replace 

Please let us know if you need any further assistance. 

Regards, 

Harini C  

[Inkz]

Dear Team,

Thank you so much for the answer, I really appreciate it.

But, I do have further questions. 

Is it possible to use findAll() just to highlight all the found texts without leaving any text selected and highlight multiple texts like all words in the set ["Adventure", "Hello", .....] also, implement my own sidebar like this one?

Regards,

Nithiphorn

[Harini Chellappa]

Hi Nithiphorn, 

Thank you. Please find the details of your query from below. 

findAll method finds all the occurences of single string and highlight. It won't accept array of strings to find. 

Regarding side bar.

 

Document editor control doesn’t provide option to customize its element structure. If you change the element structure by appending any div for side bar, it may not align properly.

 

Instead of adding in document editor element, you can add div[side bar] in line with the document editor.

 

To resize the control, which is rendered already, you can use resize method of document editor.

containerIns.documentEditor.resize(); 

Regards, 

Harini C 

[Inkz]

Dear Team,

Is it possible to use findAll() to check how many instances of the text found and ended up not selecting any text?

Regards,

Nithiphorn

[Harini Chellappa]

Hi Nithiphorn, 

Syncfusion Greetings! 

Regarding “how many instances of the text found”   

Document editor provides the searchResults API, where the result information will be returned. It includes length, index, and option to replace all occurrence with specified text and clear the results of the search.  

Please refer below documentation for your reference.   

https://ej2.syncfusion.com/react/documentation/document-editor/find-and-replace/#search-results   

Note: Once search is initiated using find or findAll API, search results will be available else search result count will be 0.   

Regarding “ended up not selecting any text?”   

When performing findAll operation, all the search results will get highlighted, by default it will be highlighted in yellow and first occurrence will be selected.   

To overcome this, the search highlight color can be customised. Set the search highlight color to white and to remove first occurrence selection, you can use any selection API to remove selection.    

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

Please refer the below sample for your reference.    

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

For removing selection of first occurrence, I have called moveToDocumentStart method which will move the selection to document start.   

this.container.documentEditor.selection.moveToDocumentStart();   

Please try the above and let us know if this helps you.  

Regards, 

Harini C 

[Inkz]

Dear Team,

Is it possible to get the text user selected (clicked and dragged to highlight manually) inside the document editor? 

As window.getSelection() or selectionStart/selectionEnd do not work inside the editor.

Also, I want you guys to know that I am really thankful and appreciate all the support you gave me, it helped me a lot.

Thank you.

[Harini Chellappa]

Hi Nithiphorn, 

Document editor provides text property of selection to return the selected text.  

Please refer the below documentation on text property 

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

Sample code snippet 

DocumentEditorContainer 

 

containerInstance.documentEditor.selection.text 

 

DocumentEditor 

 

documentEditorInstance.selection.text 

Please try the above property and let us know whether this satisfies your requirement. 

Regards, 

Harini C 

[Inkz]

Thank you so much, it works perfectly!

 I could not believe I overlooked that part of the document.

[Inkz]

Dear Team,

I know this is an old thread but I do not want to waste your resources and create a new one. 

Is there any way to maintain the editor state? 

Like when I accidentally went to another page or link and I clicked back to the editor page, the editor will remain what I edited earlier.

Also, in every online demo, I saw the file "title-bar.js" is used for the title bar. Is there any way I can have a title bar without using that file?

Thank you,

[Harini Chellappa]

Hi Nithiphorn, 

##Reg. state maintainence. 

Currently, document editor doesn’t provide support for state persistence. We have logged this as feature request and this feature will be included in any of our upcoming releases. You can track the feature status from below link.  

https://www.syncfusion.com/feedback/5211/add-state-persistence-support-in-document-editor 

we will update the status of feedback link once it is taken for implementation. We will update, once implemented.  

##Is there any way I can have a title bar without using that file? 

 

Document editor doesn’t provide in-built title bar, we can manually achieve that in application level with provided API. Hence, we have handled all the title bar creation codes in titlebar.js file. 

Regards, 

Harini C