Change the default search highlight color in Vue Document editor component
16 Mar 20231 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.
<template>
<div id="app">
<ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' :documentEditorSettings='settings' height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
</div>
</template>
<script>
import Vue from 'vue';
import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar} from '@syncfusion/ej2-vue-documenteditor';
Vue.use(DocumentEditorContainerPlugin);
export default {
data() {
return { serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/',
// Add required color to change the default search highlight color
settings:{ searchHighlightColor: 'Grey' };
},
provide: {
//Inject require modules.
DocumentEditorContainer: [Toolbar]
}
}
</script>
Output will be like below: