jQuery HtmlEditor - tableContextMenu
Default Value: null
enabled
Type:
Default Value: false
jQuery
index.js
$(function() {
$("#htmlEditorContainer").dxHtmlEditor({
// ...
tableContextMenu: {
enabled: true
}
});
});Angular
app.component.html
<dx-html-editor>
<dxo-table-context-menu
[enabled]="true">
</dxo-table-context-menu>
</dx-html-editor>Vue
App.vue
<template>
<DxHtmlEditor>
<DxTableContextMenu
:enabled="true"
/>
</DxHtmlEditor>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxHtmlEditor, {
DxTableContextMenu
} from 'devextreme-vue/html-editor';
export default {
components: {
DxHtmlEditor,
DxTableContextMenu
},
// ...
}
</script>React
App.js
import 'devextreme/dist/css/dx.light.css';
import HtmlEditor, {
TableContextMenu
} from 'devextreme-react/html-editor';
export default function App() {
return (
<HtmlEditor>
<TableContextMenu
enabled={true}
/>
</HtmlEditor>
);
}items[]
Type:
Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'image' | 'strike' | 'subscript' | 'superscript' | 'underline' | 'blockquote' | 'increaseIndent' | 'decreaseIndent' | 'orderedList' | 'bulletList' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'codeBlock' | 'variable' | 'undo' | 'redo' | 'clear' | 'insertTable' | 'insertHeaderRow' | 'insertRowAbove' | 'insertRowBelow' | 'insertColumnLeft' | 'insertColumnRight' | 'deleteColumn' | 'deleteRow' | 'deleteTable' | 'cellProperties' | 'tableProperties'
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>
);
}Feedback