- How to customize context menu in Document Editor
Contact Support
Customize context menu in Angular Document editor component
3 May 202518 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 { Component, OnInit, ViewChild } from '@angular/core';
import {
ToolbarService,
DocumentEditorContainerComponent,
} from '@syncfusion/ej2-angular-documenteditor';
import { ClickEventArgs, MenuItemModel } from '@syncfusion/ej2-navigations';
import {
CustomToolbarItemModel,
DocumentEditorContainerModule,
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-container',
standalone: true,
imports: [DocumentEditorContainerModule],
providers: [ToolbarService],
template: `
<ejs-documenteditorcontainer #documenteditor_default
serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/"
height="600px"
style="display:block"
[documentEditorSettings]= "fontFamilies" [enableToolbar]=true (created)="onCreate()">
</ejs-documenteditorcontainer>
`,
})
export class AppComponent implements OnInit {
@ViewChild('documenteditor_default')
public container?: DocumentEditorContainerComponent;
public fontFamilies = {
fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Windings'],
};
ngOnInit(): void {}
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
this.container?.documentEditor.contextMenu.addCustomMenu(menuItems, false);
// custom Options Select Event
(
this.container as DocumentEditorContainerComponent
).documentEditor.customContextMenuSelect = (args: any): void => {
// custom Options Functionality
let id = this.container?.documentEditor.element.id;
switch (args.id) {
case id + 'search_in_google':
let searchContent=
this.container?.documentEditor.selection.text;
if (
!this.container?.documentEditor.selection.isEmpty &&
/\S/.test(searchContent as string)
) {
window.open('http://google.com/search?q=' + searchContent);
}
break;
}
};
}
}
The Web API hosted link
https://services.syncfusion.com/angular/production/api/documenteditor/
utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
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 { Component, OnInit, ViewChild } from '@angular/core';
import {
ToolbarService,
DocumentEditorContainerComponent,
} from '@syncfusion/ej2-angular-documenteditor';
import { ClickEventArgs, MenuItemModel } from '@syncfusion/ej2-navigations';
import {
CustomToolbarItemModel,
DocumentEditorContainerModule,
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-container',
standalone: true,
imports: [DocumentEditorContainerModule],
providers: [ToolbarService],
template: `
<ejs-documenteditorcontainer #documenteditor_default
serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/"
height="600px"
style="display:block"
[documentEditorSettings]= "fontFamilies" [enableToolbar]=true (created)="onCreate()">
</ejs-documenteditorcontainer>
`,
})
export class AppComponent implements OnInit {
@ViewChild('documenteditor_default')
public container?: DocumentEditorContainerComponent;
public fontFamilies = {
fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Windings'],
};
ngOnInit(): void {}
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
this.container?.documentEditor.contextMenu.addCustomMenu(menuItems, true);
}
}
The Web API hosted link
https://services.syncfusion.com/angular/production/api/documenteditor/
utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
Customize added context menu items
The following code shows how to hide/show added custom option in context menu using the customContextMenuBeforeOpen
.
@Component({
selector: 'app-root',
// specifies the template string for the DocumentEditorContainer component
template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" style="display:block" [documentEditorSettings]= "fontFamilies" [enableToolbar]=true (created)="onCreate()"> </ejs-documenteditorcontainer>`,
providers: [ToolbarService]
})
export class AppComponent implements OnInit {
@ViewChild('documenteditor_default')
public container: DocumentEditorContainerComponent;
public fontFamilies={fontFamilies :['Algerian', 'Arial', 'Calibri', 'Cambria', 'Windings']};
ngOnInit(): void {
}
onCreate() {
debugger;
// creating Custom Options
let menuItems: MenuItemModel[] = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find'
}];
// adding Custom Options
this.container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
// custom Options Select Event
this.container.documentEditor.customContextMenuSelect = (args: any): void => {
// custom Options Functionality
let id: string = this.container.documentEditor.element.id;
switch (args.id) {
case id + 'search_in_google':
let searchContent: string = this.container.documentEditor.selection.text;
if (!this.container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
window.open('http://google.com/search?q=' + searchContent);
}
break;
}
};
// custom options hide/show functionality
this.container.documentEditor.customContextMenuBeforeOpen = (args: any): void => {
let search: any = document.getElementById(args.ids[0]);
search.style.display = 'none';
let searchContent: string = this.container.documentEditor.selection.text;
if (!this.container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
search.style.display = 'block';
}
};
}
}
The Web API hosted link
https://services.syncfusion.com/angular/production/api/documenteditor/
utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
The following is the output of custom context menu with customization.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor'
import { Component, OnInit,ViewChild } from '@angular/core';
import { ToolbarService ,DocumentEditorContainerComponent, CustomContentMenuEventArgs} from '@syncfusion/ej2-angular-documenteditor';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
@Component({
imports: [
DocumentEditorContainerModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the DocumentEditorContainer component
template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" style="display:block" [documentEditorSettings]= "fontFamilies" [enableToolbar]=true (created)="onCreate()"> </ejs-documenteditorcontainer>`,
providers: [ToolbarService]
})
export class AppComponent implements OnInit {
@ViewChild('documenteditor_default')
public container?: DocumentEditorContainerComponent;
public fontFamilies={fontFamilies :['Algerian', 'Arial', 'Calibri', 'Cambria', 'Windings']};
ngOnInit(): void {
}
onCreate() {
debugger;
// creating Custom Options
let menuItems: MenuItemModel[] = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find'
}];
// adding Custom Options
(this.container as DocumentEditorContainerComponent ).documentEditor.contextMenu.addCustomMenu(menuItems, false);
// custom Options Select Event
(this.container as DocumentEditorContainerComponent ).documentEditor.customContextMenuSelect = (args: any): void => {
// custom Options Functionality
let id: string = (this.container as DocumentEditorContainerComponent ).documentEditor.element.id;
switch (args.id) {
case id + 'search_in_google':
let searchContent: string = (this.container as DocumentEditorContainerComponent ).documentEditor.selection.text;
if (!(this.container as DocumentEditorContainerComponent ).documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
window.open('http://google.com/search?q=' + searchContent);
}
break;
}
};
// custom options hide/show functionality
(this.container as DocumentEditorContainerComponent ).documentEditor.customContextMenuBeforeOpen = (args: any): void => {
let search: any = document.getElementById(args.ids[0]);
search.style.display = 'none';
let searchContent: string = (this.container as DocumentEditorContainerComponent ).documentEditor.selection.text;
if (!(this.container as DocumentEditorContainerComponent ).documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
search.style.display = 'block';
}
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
The Web API hosted link
https://services.syncfusion.com/angular/production/api/documenteditor/
utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
Customize Context Menu with sub-menu items
Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the addCustomMenu()
method.
The following code shows how to add a sub items in the custom option in context menu in Document Editor Container.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor';
import { Component, OnInit, ViewChild } from '@angular/core';
import {
ToolbarService,
DocumentEditorContainerComponent,
CustomContentMenuEventArgs,
} from '@syncfusion/ej2-angular-documenteditor';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
@Component({
imports: [DocumentEditorContainerModule],
standalone: true,
selector: 'app-container',
// specifies the template string for the DocumentEditorContainer component
template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true (created)="onCreate()"> </ejs-documenteditorcontainer>`,
providers: [ToolbarService],
})
export class AppComponent implements OnInit {
@ViewChild('documenteditor_default')
public container?: DocumentEditorContainerComponent;
ngOnInit(): void {}
onCreate() {
debugger;
// creating Custom Options
let menuItems = [
{
text: 'Form field',
id: 'form field',
iconCss: 'e-de-formfield e-icons',
items: [
{
text: 'Text form',
id: 'Text form',
iconCss: 'e-icons e-de-textform',
},
{
text: 'Check box',
id: 'Check box',
iconCss: 'e-icons e-de-checkbox-form',
},
{
text: 'Drop down',
id: 'Drop down',
iconCss: 'e-icons e-de-dropdownform',
},
],
},
];
(
this.container as DocumentEditorContainerComponent
).documentEditor.contextMenu.addCustomMenu(menuItems, false, true);
}
}
The Web API hosted link
https://services.syncfusion.com/angular/production/api/documenteditor/
utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.