Vue 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.
- <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>
icon
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:
- <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>
template
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.
- <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>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.