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.
jQuery
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'
]
}
});
});Angular
app.component.html
<dx-html-editor>
<dxo-table-context-menu
[enabled]="true">
<dxi-item name="insertHeaderRow"></dxi-item>
<dxi-item name="insertRowAbove"></dxi-item>
<dxi-item name="insertRowBelow"></dxi-item>
<dxi-item name="insertColumnLeft" [beginGroup]="true"></dxi-item>
<dxi-item name="insertColumnRight"></dxi-item>
<dxi-item name="deleteColumn" [beginGroup]="true"></dxi-item>
<dxi-item name="deleteRow"></dxi-item>
<dxi-item name="deleteTable"></dxi-item>
<dxi-item name="cellProperties" [beginGroup]="true"></dxi-item>
<dxi-item name="tableProperties"></dxi-item>
</dxo-table-context-menu>
</dx-html-editor>Vue
App.vue
<template>
<DxHtmlEditor>
<DxTableContextMenu
:enabled="true">
<DxTableContextMenuItem name="insertHeaderRow" />
<DxTableContextMenuItem name="insertRowAbove" />
<DxTableContextMenuItem name="insertRowBelow" />
<DxTableContextMenuItem name="insertColumnLeft" :begin-group="true" />
<DxTableContextMenuItem name="insertColumnRight" />
<DxTableContextMenuItem name="deleteColumn" :begin-group="true" />
<DxTableContextMenuItem name="deleteRow" />
<DxTableContextMenuItem name="deleteTable" />
<DxTableContextMenuItem name="cellProperties" :begin-group="true" />
<DxTableContextMenuItem name="tableProperties" />
</DxTableContextMenu>
</DxHtmlEditor>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxHtmlEditor, {
DxTableContextMenu,
DxTableContextMenuItem
} from 'devextreme-vue/html-editor';
export default {
components: {
DxHtmlEditor,
DxTableContextMenu,
DxTableContextMenuItem
},
// ...
}
</script>React
App.js
import 'devextreme/dist/css/dx.light.css';
import HtmlEditor, {
TableContextMenu,
TableContextMenuItem
} from 'devextreme-react/html-editor';
export default function App() {
return (
<HtmlEditor>
<TableContextMenu
enabled={true}
<TableContextMenuItem name="insertHeaderRow" />
<TableContextMenuItem name="insertRowAbove" />
<TableContextMenuItem name="insertRowBelow" />
<TableContextMenuItem name="insertColumnLeft" beginGroup={true} />
<TableContextMenuItem name="insertColumnRight" />
<TableContextMenuItem name="deleteColumn" beginGroup={true} />
<TableContextMenuItem name="deleteRow" />
<TableContextMenuItem name="deleteTable" />
<TableContextMenuItem name="cellProperties" beginGroup={true} />
<TableContextMenuItem name="tableProperties" />
</TableContextMenu>
</HtmlEditor>
);
}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.
items
Use this property to create a hierarchical context menu. The following code demonstrates an example:
jQuery
index.js
$(function() {
$("#htmlEditorContainer").dxHtmlEditor({
// ...
tableContextMenu: {
enabled: true,
items: [{
text: 'Font Style',
items: [
'bold',
'italic',
'underline',
'strike'
]
}]
}
});
});Angular
app.component.html
<dx-html-editor>
<dxo-table-context-menu
[enabled]="true">
<dxi-item text="Font Style">
<dxi-item name="bold"></dxi-item>
<dxi-item name="italic"></dxi-item>
<dxi-item name="underline"></dxi-item>
<dxi-item name="strike"></dxi-item>
</dxi-item>
</dxo-table-context-menu>
</dx-html-editor>Vue
App.vue
<template>
<DxHtmlEditor>
<DxTableContextMenu
:enabled="true">
<DxTableContextMenuItem
text="Font Style">
<DxTableContextMenuItem name="bold" />
<DxTableContextMenuItem name="italic" />
<DxTableContextMenuItem name="underline" />
<DxTableContextMenuItem name="strike" />
</DxTableContextMenuItem>
</DxTableContextMenu>
</DxHtmlEditor>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxHtmlEditor, {
DxTableContextMenu,
DxTableContextMenuItem
} from 'devextreme-vue/html-editor';
export default {
components: {
DxHtmlEditor,
DxTableContextMenu,
DxTableContextMenuItem
},
// ...
}
</script>React
App.js
import 'devextreme/dist/css/dx.light.css';
import HtmlEditor, {
TableContextMenu,
TableContextMenuItem
} from 'devextreme-react/html-editor';
export default function App() {
return (
<HtmlEditor>
<TableContextMenu
enabled={true}>
<TableContextMenuItem
text="Font Style">
<TableContextMenuItem name="bold" />
<TableContextMenuItem name="italic" />
<TableContextMenuItem name="underline" />
<TableContextMenuItem name="strike" />
</TableContextMenuItem>
</TableContextMenu>
</HtmlEditor>
);
}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.
jQuery
index.js
$(function() {
$("#htmlEditorContainer").dxHtmlEditor({
// ...
tableContextMenu: {
items: [
{
// ...
template: '<div>Custom Item</div>'
}
]
}
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-html-editor ... >
<dxo-table-context-menu>
<dxi-item ...>
<div *dxTemplate>
<div>Custom Item</div>
</div>
</dxi-item>
</dxo-table-context-menu>
</dx-html-editor>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxHtmlEditorModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxHtmlEditorModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
App.vue
<template>
<DxHtmlEditor>
<DxTableContextMenu>
<DxItem ...>
<div>Custom Item</div>
</DxItem>
</DxTableContextMenu>
</DxHtmlEditor>
</template>
<script>
import DxHtmlEditor, {
DxContextMenu, DxItem
} from 'devextreme-vue/html-editor';
export default {
components: {
DxHtmlEditor,
DxContextMenu,
DxItem
},
// ...
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import HtmlEditor, {
ContextMenu, Item
} from 'devextreme-react/html-editor';
const renderCustomItem = () => {
return <div>Custom Item</div>;
}
function App() {
return (
<HtmlEditor ... >
<TableContextMenu>
<Item ...
render={renderCustomItem}
>
</Item>
</TableContextMenu>
</HtmlEditor>
);
}
export default App;See Also
Feedback