Customize context menu in React Document editor component
30 Jan 202319 minutes to read
How to customize context menu in Document Editor
Document Editor allows you to add custom option in context menu. It can be achieved by using the addCustomMenu()
method and custom action is defined using the customContextMenuSelect
Add Custom Option
The following code shows how to add custom option in context menu.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
DocumentEditorContainerComponent,
Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
let container: DocumentEditorContainerComponent;
React.useEffect(() => {
onCreate();
}, []);
function onCreate() {
// creating Custom Options
let menuItems: MenuItemModel[] = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find',
},
];
// adding Custom Options
container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
// custom Options Select Event
container.documentEditor.customContextMenuSelect = (
args: any
): void => {
// custom Options Functionality
let id: string = container.documentEditor.element.id;
switch (args.id) {
case id + 'search_in_google':
// To get the selected content as plain text
let searchContent: string =
container.documentEditor.selection.text;
if (
!container.documentEditor.selection.isEmpty &&
/\S/.test(searchContent)
) {
window.open('http://google.com/search?q=' + searchContent);
}
break;
}
};
}
return (
<DocumentEditorContainerComponent
id="container"
ref={(scope) => {
container = scope;
}}
height={'590px'}
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
enableToolbar={true}
created={onCreate}
/>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'));
Customize custom option in context menu
Document Editor allows you to customize the added custom option and also to hide/show default context menu.
Hide default context menu items
Using addCustomMenu()
method, you can hide the default context menu. By setting second parameter as true.
The following code shows how to hide default context menu and add custom option in context menu.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
DocumentEditorContainerComponent,
Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
let container: DocumentEditorContainerComponent;
React.useEffect(() => {
onCreate();
}, []);
function onCreate(): void {
// creating Custom Options
let menuItems: MenuItemModel[] = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find',
},
];
// adding Custom Options
container.documentEditor.contextMenu.addCustomMenu(menuItems, true);
}
return (
<DocumentEditorContainerComponent
id="container"
ref={(scope) => {
container = scope;
}}
height={'590px'}
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
enableToolbar={true}
created={onCreate}
/>
);
} export default App;
ReactDOM.render(<App />, document.getElementById('root'));
Customize added context menu items
The following code shows how to hide/show added custom option in context menu using the customContextMenuBeforeOpen
.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
DocumentEditorContainerComponent,
Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
let container: DocumentEditorContainerComponent;
React.useEffect(() => {
onCreate()
}, []);
function onCreate() {
// creating Custom Options
let menuItems: MenuItemModel[] = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find',
},
];
// adding Custom Options
container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
// custom Options Select Event
container.documentEditor.customContextMenuSelect = (args: any): void => {
// custom Options Functionality
let id: string = container.documentEditor.element.id;
switch (args.id) {
case id + 'search_in_google':
let searchContent: string = container.documentEditor.selection.text;
if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
window.open('http://google.com/search?q=' + searchContent);
}
break;
}
};
// custom options hide/show functionality
container.documentEditor.customContextMenuBeforeOpen = (args: any): void => {
let search: any = document.getElementById(args.ids[0]);
search.style.display = 'none';
let searchContent: string = container.documentEditor.selection.text;
if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
search.style.display = 'block';
}
};
}
return (
<DocumentEditorContainerComponent
id="container"
ref={(scope) => {
container = scope;
}}
height={'590px'}
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
enableToolbar={true}
created={onCreate}
/>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'));
The following is the output of custom context menu with customization.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorContainerComponent, Toolbar, } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
let container;
React.useEffect(() => {
onCreate();
}, []);
function onCreate() {
// creating Custom Options
let menuItems = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find',
},
];
// adding Custom Options
container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
// custom Options Select Event
container.documentEditor.customContextMenuSelect = (args) => {
// custom Options Functionality
let id = container.documentEditor.element.id;
switch (args.id) {
case id + 'search_in_google':
let searchContent = container.documentEditor.selection.text;
if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
window.open('http://google.com/search?q=' + searchContent);
}
break;
}
};
// custom options hide/show functionality
container.documentEditor.customContextMenuBeforeOpen = (args) => {
let search = document.getElementById(args.ids[0]);
search.style.display = 'none';
let searchContent = container.documentEditor.selection.text;
if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
search.style.display = 'block';
}
};
}
return (<DocumentEditorContainerComponent id="container" ref={(scope) => {
container = scope;
}} height={'590px'} serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" enableToolbar={true} created={onCreate}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
DocumentEditorContainerComponent,
Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
let container: DocumentEditorContainerComponent;
React.useEffect(() => {
onCreate()
}, []);
function onCreate() {
// creating Custom Options
let menuItems: MenuItemModel[] = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find',
},
];
// adding Custom Options
container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
// custom Options Select Event
container.documentEditor.customContextMenuSelect = (args: any): void => {
// custom Options Functionality
let id: string = container.documentEditor.element.id;
switch (args.id) {
case id + 'search_in_google':
let searchContent: string = container.documentEditor.selection.text;
if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
window.open('http://google.com/search?q=' + searchContent);
}
break;
}
};
// custom options hide/show functionality
container.documentEditor.customContextMenuBeforeOpen = (args: any): void => {
let search: any = document.getElementById(args.ids[0]);
search.style.display = 'none';
let searchContent: string = container.documentEditor.selection.text;
if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
search.style.display = 'block';
}
};
}
return (
<DocumentEditorContainerComponent
id="container"
ref={(scope) => {
container = scope;
}}
height={'590px'}
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
enableToolbar={true}
created={onCreate}
/>
);
} export default App
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-base/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-inputs/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-lists/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-popups/styles/fabric.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>