JavaScript/jQuery HtmlEditor - tableContextMenu.items
Use this property to customize the context menu. For example, the following code creates a flat menu of table commands instead of the default hierarchical menu. The beginGroup property is used to divide command groups.
index.js
- $(function() {
- $("#htmlEditorContainer").dxHtmlEditor({
- // ...
- tableContextMenu: {
- enabled: true,
- items: [
- 'insertHeaderRow',
- 'insertRowAbove',
- 'insertRowBelow',
- { name: 'insertColumnLeft', beginGroup: true },
- 'insertColumnRight',
- { name: 'deleteColumn', beginGroup: true },
- 'deleteRow',
- 'deleteTable',
- { name: 'cellProperties', beginGroup: true },
- 'tableProperties'
- ]
- }
- });
- });
icon
Type:
This property accepts one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
- The icon in the SVG format. Ensure that the source is reliable.
template
Type:
The following types of the specified value are available.
- Assign a string containing the name of the required template.
- Assign a jQuery object of the template's container.
- Assign a DOM Node of the template's container.
- Assign a function that returns the jQuery object or a DOM Node of the template's container.
The following example adds a custom item to the component. Note that Angular and Vue use custom templates instead of the template property. In React, specify the render or component properties.
index.js
- $(function() {
- $("#htmlEditorContainer").dxHtmlEditor({
- // ...
- tableContextMenu: {
- items: [
- {
- // ...
- template: '<div>Custom Item</div>'
- }
- ]
- }
- });
- });
See Also
Feedback