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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Accessing the content inside the editor programmatically

Thread ID:

Created:

Updated:

Platform:

Replies:

151172 Feb 3,2020 03:33 AM UTC Apr 20,2020 11:27 AM UTC React - EJ 2 10
loading
Tags: DocumentEditor
Inkz
Asked On February 4, 2020 07:11 AM UTC

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 [Syncfusion]
Replied On 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  


Inkz
Replied On 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

Harini Chellappa [Syncfusion]
Replied On 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 


Inkz
Replied On 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


Harini Chellappa [Syncfusion]
Replied On 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 


Inkz
Replied On 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.


Harini Chellappa [Syncfusion]
Replied On 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 


Inkz
Replied On 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.

Inkz
Replied On 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,

Harini Chellappa [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon