Change the default search highlight color in React DocumentEditor component

02 Feb 2023 / 1 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 * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  // Add required color to change the default search highlight color
  let searchHighlightColor = {
    searchHighlightColor: 'Grey'
  };
    return (
      <DocumentEditorContainerComponent
        id="container"
        height={'590px'}
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        enableToolbar={true}
        documentEditorSettings={searchHighlightColor}
      />
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'));

Output will be like below:

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!