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.
- $(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
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
name
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.
- $(function() {
- $("#htmlEditorContainer").dxHtmlEditor({
- // ...
- tableContextMenu: {
- items: [
- {
- // ...
- template: '<div>Custom Item</div>'
- }
- ]
- }
- });
- });
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.