Format text on uploaded document programmatically

[William Morgenweck]

Is it possible to load a Word Document and have a button that calls a function that highlights a list of words that is in an array in code?  I need to load Grant Requests and on the review process I have a list of words that need to be identified in the document.  I would like to either highlight them or underline or change the color of the font.

Is this possible?

[Dhanush Sekar]

Hi William,

We can achieve your requirement using the Document editor's find-and-replace functionality. Please refer to the explanation and sample below.

Explanation:

• On the DocumentChange event, you can find the list of words and highlight the selected text.

Sample: https://stackblitz.com/edit/vtpcexvx-h7tznjcn?file=src%2FApp.vue

Documentation: 

Text format in Vue Document editor component | Syncfusion

Find and replace in Vue Document editor component | Syncfusion

Please let us know whether the provided solution meets your requirements.

Regards,

Dhanush S

[William Morgenweck]

This is a great start.  Is there a Regex or other method that can be used to find only whole words?

If I need to search for the word "the" it finds all of the "the" fine but it also selects the "the" in their or theses. 

I tried using " the " (blank spaces added) and that works, but then limits "the." at the end of a sentence.

[William Morgenweck]

I see in your example that you findAll ("works") and then a findAll("Adventure"), however the only word highlighted is the last one you findAll.

Is there a way to highLight all words that are found?

 checkWords() {

      this.$refs.doceditcontainer.ej2Instances.documentEditor.search.findAll(

        "works "

      );

      let searchLength =

        this.$refs.doceditcontainer.ej2Instances.documentEditor.search

          .searchResults.length;

      console.log(searchLength);

      this.$refs.doceditcontainer.ej2Instances.documentEditor.search.findAll(

        "Adventure"

      );

      searchLength =

        this.$refs.doceditcontainer.ej2Instances.documentEditor.search

          .searchResults.length;

          console.log(searchLength);

    },

 

[William Morgenweck]

Also is there a file size limit to a Word Document?  When I try to load a 6 MB file it stalls out and the spinner just keeps going on.

[Dhanush Sekar]

Hi William,

Regarding this "If I need to search for the word "the" it finds all of the "the" fine but it also selects the "the" in their or theses":

To retrieve only the entire word, utilize the findOptions parameter in the findAll API of the Document editor.

Code: 

this.$refs.doceditcontainer.ej2Instances.documentEditor.search.findAll("works", "WholeWord");

Regarding this " I see in your example that you findAll ("works") and then a findAll("Adventure"), however the only word highlighted is the last one you findAll. "

It is not possible to retain previous search occurrences in the Document editor. When the findAll API is used, all previous search occurrences will be removed.

Regarding this " Also is there a file size limit to a Word Document?  When I try to load a 6 MB file it stalls out and the spinner just keeps going on. "

There is no file size limit in Document editor. 

Could you please confirm that whether you are facing document opening issue with local web service?

if yes, Could you please provide us the input Word document that was used at your end? Thereby, we will analyze further and provide you the appropriate solution at the earliest.

Regards,

Dhanush S

[William Morgenweck]

I changing my approach a bit when it comes to highlighting a list of words since I can only highlight one different word at a time.  I'm using the find all to create an array of the words and the word count and putting in on the side in a list of items.  If I click on a word how can I have it open the "Find Navigation Panel" and put the word in the find input and show all of the results.  If I select a word that has 

 this.$refs.doceditcontainer.ej2instances.search.find(

        "Adventure",

        "WholeWord"

      );

It will put the word in the navigation Panel if I click on Find in the toolbar.  Also it will find all of the occurrence if I click the search icon.  Can I do all of this programmatically if I click on one of the words that was created in my list?

I'm using this code from the event of a toggle button change:

 setSelected(selectedIndex, searchWord) {

      if (this.selectedWordIndex) {

        this.filteredResults[this.selectedWordIndex].selected = false;

      }

      this.$refs.doceditcontainer.ej2Instances.documentEditor.search.searchResults.clear();

      console.log("OK Start");

      this.$refs.doceditcontainer.ej2Instances.documentEditor.search.findAll(

        searchWord,

        "WholeWord"

      );

      this.$refs.doceditcontainer.ej2Instances.documentEditor.selection.characterFormat.highlightColor =

        "Pink";

      this.selectedWordIndex = selectedIndex; //sets Index for toggle

      console.log("OK End");

    },

But only one word is highlighted in pink the others are in yellow.  Can the highlight color be set for all programmatically?  Maybe globally? 

[Dhanush Sekar]

Hi William,

You can open the find navigation pane using the below code and it's not possible to input search word to navigation pane programmatically. 

    //Open options pane.
    this.$refs.doceditcontainer.ej2Instances.documenteditor.showOptionsPane();

To set the search highlight color in the Vue DocumentEditor, you can use the searchHighlightColor property within the documentEditorSettings. This property allows you to customize the color used to highlight search results in the Document Editor. Here is an example of how you can implement this:

<ejs-documenteditorcontainer

      ref='documenteditor'

      :serviceurl='serviceurl'

      :documenteditorsettings='settings'

      height="590px"

      id='container'

      :enabletoolbar='true'

    ></ejs-documenteditorcontainer>

// Customize the search highlight color

const settings = {

  searchhighlightcolor: 'grey' // Set your desired highlight color here

};

Regards,

Dhanush S

[William Morgenweck]

Is there a way to programmatically call the Find toolbar item?  I can get the search word to show on the navigation pane but only after clicking Find

How about calling the Search Icon click event on the  navigation pane programmatically?

Thanks  your a big help

[Dhanush Sekar]

Hi William,

Currently, It is not possible to achieve this requirement in the Document editor. We are validating this as feature request and will update the details on February 24, 2025.

Regards,

Dhanush S

[Dhanush Sekar]

Hi William,

Currently, It is not possible to achieve this requirement in the Document editor. We are validating this as feature request and will update the details on February 24, 2025.

Regards,

Dhanush S