JavaScript/jQuery HtmlEditor - tableContextMenu
Default Value: null
enabled
Type:
Default Value: false
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>
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.
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>
Feedback