Context Menu
7 Jun 20172 minutes to read
Editor provides custom context menu support, which enables more interaction on the content modification and also it can be enabled dynamically. The showContextMenu property helps to enable custom context menu within editor area.
Based on the target content type context menu provides different actions. Refer the details with below table.
<textarea ej-rte id="rte" [showContextMenu]="true"></textarea>
//or
//create an instance from an existing RTE.
rteObj=$("#texteditor").data("ejRTE");
//set the showcontextmenu property using set model
rteObj.setModel({showContextMenu: true});
- Based on the target content type contextmenu provides different actions- refer the details with below table.
Content-Type | Supported Actions |
Text content | cut, copy, paste, add/edit/open/remove hyperlink. |
Image content | cut, copy, paste, image properties. |
Table content | cut, copy, paste, insert row/column, remove row/column/table, edit table properties, add/edit/open/remove hyperlink. |
NOTE
We have given support to own context menu by restricting the default browser context menu, which provides you the options for quick access but, with that clipboard action are restricted based on browser behavior.
However we can disable the context menu by using ShowContextMenu API and it needs to be set as false, if you wish to continue with default browser context menu.
Adding an item with the context menu
To add a new item to the editor contextmenu, you need to use the ‘insertMenuOption’’ client side-event.
<textarea ej-rte id="rte" (contextMenuClick)="menuClick($event)"></textarea>
import {Component} from '@angular/core';
@Component({
selector: 'sd-home',
templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
menuClick($event) {
var rteeObj = $("#rte").data("ejRTE");// Inserts new item to the contextmenu
rteeObj.insertMenuOption({
newItem: "Show Table Details",
targetItem: "Table Properties",
insertType: ("insertAfter"),
menuType: { text: false, image: false, hyperlink: false, table: true },
spriteCssClass: "e-rte-toolbar-icon tableProperties"
});
}
}
Removing an item from the context menu
To remove a menu-item from the editor contextmenu, you have to use the ‘removeMenuOption’ method from the ejRTE object and find the method and parameter details with the API-document.
<textarea id="texteditor" ej-rte></textarea>
//Add the below code in the required event in order to remove an item from the context menu
var rteeObj = $("#texteditor").data("ejRTE");
rteeObj.removeMenuOption("Table-Details");
NOTE
Using above code, we have removed the Table Details item which has been inserted in the previous example.