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
  1. Home
  2. Forum
  3. React - EJ 2
  4. Accessing the content inside the editor programmatically

Accessing the content inside the editor programmatically

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

10 Replies
HC Harini Chellappa Syncfusion Team February 4, 2020 09:56 AM UTC

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. 



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. 


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



Please let us know if you need any further assistance. 

Regards, 
Harini C  


IN Inkz February 5, 2020 09:01 AM UTC

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

HC Harini Chellappa Syncfusion Team February 6, 2020 01:08 PM UTC

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 


IN Inkz February 12, 2020 05:11 PM UTC

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


HC Harini Chellappa Syncfusion Team February 14, 2020 05:37 AM UTC

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.   


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.    


Please refer the below sample for your reference.    


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 


IN Inkz February 29, 2020 06:39 PM UTC

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.


HC Harini Chellappa Syncfusion Team March 2, 2020 09:06 AM UTC

Hi Nithiphorn, 

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

Please refer the below documentation on text property 


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 


IN Inkz March 2, 2020 04:21 PM UTC

Thank you so much, it works perfectly!

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

IN Inkz April 18, 2020 04:39 PM UTC

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,

HC Harini Chellappa Syncfusion Team April 20, 2020 11:27 AM UTC

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.  


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 


Loader.
Up arrow icon