Change the default search highlight color in Angular Document editor component

20 Dec 20221 minute to read

Document editor provides an options to change the default search highlight color using searchHighlightColor in Document editor settings. The highlight color which is given in documentEditorSettings will be highlighted on the searched text. By default, search highlight color is yellow.

Similarly, you can use documentEditorSettings property for DocumentEditor also.

The following example code illustrates how to change the default search highlight color.

import { Component, OnInit } from '@angular/core';
import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
@Component({
      selector: 'app-root',
      // specifies the template string for the DocumentEditorContainer component
      template: `<ejs-documenteditorcontainer serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" height="600px" style="display:block" [documentEditorSettings]= "searchHighlightColor" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
      providers: [ToolbarService],
})
export class AppComponent implements OnInit {
    // Add required color to change the default search highlight color
    public searchHighlightColor = { searchHighlightColor: 'Grey' };
    ngOnInit(): void {}
}

Output will be like below:

How to change the default search highlight color