Editor Menus in Vue Block Editor component
17 Dec 202524 minutes to read
The Block Editor component provides several interactive menus to enhance content creation and editing. These menus offer quick access to various commands and formatting options.
Slash command menu
The Slash Command menu allows users to quickly insert or transform blocks by typing / followed by a command. This provides an efficient, keyboard-driven way to interact with the editor.
Built-in items
The Slash Command menu comes with a set of pre-defined commands for all block types:
- Headings(Level 1 to 4): to insert respective heading blocks.
- Lists(Bullet, Numbered, Checklist): for different list types.
- Paragraph: for standard text blocks.
- Image: for media insertion.
- Table: Inserts a table block.
- Toggle: for collapsible content.
- Callout: for highlighting important information.
- Utility(Divider, Quote, Code): for other utility blocks.
Customize Slash command menu
You can use the commandMenuSettings property to modify the Slash Command menu. This allows you to add custom commands, remove default items, or change the behavior of existing commands to fit your application’s requirements.
Events
The following events are available in the Slash Command menu.
| Name | Args | Description |
|---|---|---|
| filtering | CommandFilteringEventArgs | Triggers when the user types to filter the command menu items. |
| itemSelect | CommandItemSelectEventArgs | Triggers when the user clicks on a command menu item. |
Below example demonstrates how to configure the events in the Slash Command menu.
<template>
<div id='container'>
<ejs-blockeditor id="blockeditor" :blocks="blocksData" :commandMenuSettings="commandMenuSettings"></ejs-blockeditor>
<div id="controls">
<h3>Slash Command Menu Configuration Demo</h3>
<div class="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>
Click in the editor below and type "/" to open the slash command
menu
</li>
<li>Notice the custom popup size, commands and disabled tooltips</li>
</ol>
</div>
</div>
</div>
</template>
<script setup>
import { BlockEditorComponent as EjsBlockeditor, ContentType } from "@syncfusion/ej2-vue-blockeditor";
const blocksData = [
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Type "/" anywhere in this editor to open the custom slash command menu.'
}
]
}
];
const commandMenuSettings = {
popupWidth: '350px',
popupHeight: '400px',
// Custom command items
commands: [
{
id: 'line-cmd',
type: 'Divider',
groupBy: 'Utility',
label: 'Insert a Line',
iconCss: 'e-icons e-divider',
},
{
id: 'timestamp-cmd',
groupBy: 'Actions',
label: 'Insert Timestamp',
iconCss: 'e-icons e-schedule',
}
],
itemSelect: () => {
// Handle custom command actions
},
filtering: () => {
// Your actions here
}
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style><template>
<div id='container'>
<ejs-blockeditor id="blockeditor" :blocks="blocksData" :commandMenuSettings="commandMenuSettings"></ejs-blockeditor>
<div id="controls">
<h3>Slash Command Menu Configuration Demo</h3>
<div class="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>
Click in the editor below and type "/" to open the slash command
menu
</li>
<li>Notice the custom popup size, commands and disabled tooltips</li>
</ol>
</div>
</div>
</div>
</template>
<script>
import { BlockEditorComponent, ContentType } from "@syncfusion/ej2-vue-blockeditor";
export default {
components: {
'ejs-blockeditor': BlockEditorComponent,
},
data() {
return {
blocksData: [
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Type "/" anywhere in this editor to open the custom slash command menu.'
}
]
}
],
commandMenuSettings: {
popupWidth: '350px',
popupHeight: '400px',
// Custom command items
commands: [
{
id: 'line-cmd',
type: 'Divider',
groupBy: 'Utility',
label: 'Insert a Line',
iconCss: 'e-icons e-divider',
},
{
id: 'timestamp-cmd',
groupBy: 'Actions',
label: 'Insert Timestamp',
iconCss: 'e-icons e-schedule',
}
],
itemSelect: () => {
// Handle custom command actions
},
filtering: () => {
// Your actions here
}
}
};
},
methods: {
}
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>Context menu
The Context menu appears when a user right-clicks within a specific block. It provides context-aware actions relevant to the clicked block or content.
Built-in items
The Context menu offers different built-in options:
- Undo/Redo: Undo and redo actions.
- Cut/Copy/Paste: Standard clipboard actions.
- Indent: Increase or decrease the indent level of the selected block.
- Link: Add or edit a hyperlink.
Customize Context menu
You can use the contextMenuSettings property to customize the Context menu. This allows you to add specific actions or modify existing items based on your application needs.
Below example demonstrates how to customize the Context menu.
Events
The following events are available in the Context menu.
| Name | Args | Description |
|---|---|---|
| opening | ContextMenuOpeningEventArgs | Triggers before the context menu opens. |
| closing | ContextMenuClosingEventArgs | Triggers before the context menu closes. |
| itemSelect | ContextMenuItemSelectEventArgs | Triggers when a context menu item is clicked. |
Below example demonstrates how to configure the events in the Context menu.
<template>
<div id='container'>
<ejs-blockeditor id="blockeditor" :blocks="blocksData" :contextMenuSettings="contextMenuSettings"></ejs-blockeditor>
<div id="controls">
<h3>Context Menu Configuration Demo</h3>
<div class="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Right-click anywhere in the editor to open the context menu</li>
<li>Notice the custom popup size, menu items and disabled tooltips</li>
<li>Try clicking on items with submenus (they appear on click, not hover)</li>
</ol>
</div>
</div>
</div>
</template>
<script setup>
import { BlockEditorComponent as EjsBlockeditor, ContentType } from "@syncfusion/ej2-vue-blockeditor";
const blocksData = [
{
blockType: 'Heading',
properties: { level: 1},
content: [
{
contentType: ContentType.Text,
content: 'Context Menu Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Right-click anywhere in this editor to open the custom context menu. Try different areas and blocks.'
}
]
}
];
const customContextMenuItems = [
{
id: 'format-menu',
text: 'Format',
iconCss: 'e-icons e-format-painter',
items: [
{
id: 'bold-item',
text: 'Bold',
iconCss: 'e-icons e-bold',
},
{
id: 'italic-item',
text: 'Italic',
iconCss: 'e-icons e-italic',
},
{
id: 'underline-item',
text: 'Underline',
iconCss: 'e-icons e-underline',
}
]
},
{ separator: true },
{
id: 'statistics-item',
text: 'Block Statistics',
iconCss: 'e-icons e-chart'
},
{
id: 'export-item',
text: 'Export Options',
iconCss: 'e-icons e-export',
items: [
{
id: 'export-json',
text: 'Export as JSON',
iconCss: 'e-icons e-file-json'
},
{
id: 'export-html',
text: 'Export as HTML',
iconCss: 'e-icons e-file-html'
},
{
id: 'export-pdf',
text: 'Export as PDF',
iconCss: 'e-icons e-file-pdf'
}
]
}
];
const contextMenuSettings= {
enable: true,
showItemOnClick: true,
items: customContextMenuItems,
opening: () => {
// Your actions here
},
closing: () => {
// Your actions here
},
itemSelect: () => {
// Handle custom actions here
}
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style><template>
<div id='container'>
<ejs-blockeditor id="blockeditor" :blocks="blocksData" :contextMenuSettings="contextMenuSettings"></ejs-blockeditor>
<div id="controls">
<h3>Context Menu Configuration Demo</h3>
<div class="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Right-click anywhere in the editor to open the context menu</li>
<li>Notice the custom popup size, menu items and disabled tooltips</li>
<li>Try clicking on items with submenus (they appear on click, not hover)</li>
</ol>
</div>
</div>
</div>
</template>
<script>
import { BlockEditorComponent, ContentType } from "@syncfusion/ej2-vue-blockeditor";
export default {
components: {
'ejs-blockeditor': BlockEditorComponent,
},
data() {
return {
customContextMenuItems : [
{
id: 'format-menu',
text: 'Format',
iconCss: 'e-icons e-format-painter',
items: [
{
id: 'bold-item',
text: 'Bold',
iconCss: 'e-icons e-bold',
},
{
id: 'italic-item',
text: 'Italic',
iconCss: 'e-icons e-italic',
},
{
id: 'underline-item',
text: 'Underline',
iconCss: 'e-icons e-underline',
}
]
},
{ separator: true },
{
id: 'statistics-item',
text: 'Block Statistics',
iconCss: 'e-icons e-chart'
},
{
id: 'export-item',
text: 'Export Options',
iconCss: 'e-icons e-export',
items: [
{
id: 'export-json',
text: 'Export as JSON',
iconCss: 'e-icons e-file-json'
},
{
id: 'export-html',
text: 'Export as HTML',
iconCss: 'e-icons e-file-html'
},
{
id: 'export-pdf',
text: 'Export as PDF',
iconCss: 'e-icons e-file-pdf'
}
]
}
],
blocksData: [
{
blockType: 'Heading',
properties: { level: 1},
content: [
{
contentType: ContentType.Text,
content: 'Context Menu Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Right-click anywhere in this editor to open the custom context menu. Try different areas and blocks.'
}
]
}
],
contextMenuSettings: {
enable: true,
showItemOnClick: true,
items: this.customContextMenuItems,
opening: () => {
// Your actions here
},
closing: () => {
// Your actions here
},
itemSelect: () => {
// Handle custom actions here
}
}
};
},
methods: {
}
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>Block action menu
The Block Action menu typically appears next to a block when you hover over it and click on the drag handle icon, offering quick actions specific to that block.
Built-in items
The Block Action menu provides convenient actions for managing individual blocks:
- Duplicate: Create a copy of the current block.
- Delete: Remove the block from the editor.
- Move Up: Move the block one level up in the hierarchy.
- Move Down: Move the block one level down in the hierarchy.
Customize Block action menu
You can use the blockActionMenuSettings property to customize the Block action menu. This enables you to add block-specific commands that are relevant to your application, allowing for a highly tailored user experience.
Below example demonstrates how to customize the Block action menu.
Show or hide tooltip
By default, a tooltip is displayed when the user hovers over an action item. You can show or hide the tooltip using the enableTooltip property in the block action menu settings.
Events
The following events are available in the Block action menu.
| Name | Args | Description |
|---|---|---|
| opening | BlockActionMenuOpeningEventArgs | Triggers when the block action menu is opened. |
| closing | BlockActionMenuClosingEventArgs | Triggers when the block action menu is closed. |
| itemSelect | BlockActionItemSelectEventArgs | Triggers when a block action menu item is clicked. |
Below example demonstrates how to configure the events in the Blockaction menu.
<template>
<div id='container'>
<ejs-blockeditor id="blockeditor" :blocks="blocksData" :blockActionMenuSettings="blockActionMenuSettings"></ejs-blockeditor>
<div id="controls">
<h3>Block Action Menu Configuration Demo</h3>
<div class="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>
Hover over any block in the editor to see the block action menu
</li>
<li>Click on the action menu icon (⋮) next to any block</li>
<li>Notice the custom popup size, action items and disabled tooltips</li>
</ol>
</div>
</div>
</div>
</template>
<script setup>
import { BlockEditorComponent as EjsBlockeditor, ContentType } from "@syncfusion/ej2-vue-blockeditor";
const blocksData = [
{
blockType: 'Heading',
properties: { level: 1},
content: [
{
contentType: ContentType.Text,
content: 'Block Action Menu Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Hover over any block and click the drag handle icon to see custom actions.'
}
]
}
];
const blockActionMenuSettings= {
enable: true,
popupWidth: '180px',
popupHeight: '110px',
enableTooltip: false,
// Custom action items
items: [
{
id: 'highlight-action',
label: 'Highlight Block',
iconCss: 'e-icons e-highlight',
tooltip: 'Highlight this block'
},
{
id: 'copy-content-action',
label: 'Copy Content',
iconCss: 'e-icons e-copy',
tooltip: 'Copy block content to clipboard'
},
{
id: 'block-info-action',
label: 'Block Info',
tooltip: 'Show block information'
}
],
opening: () => {
// Your actions here
},
closing: () => {
// Your actions here
},
itemSelect: () => {
// Handle custom block actions
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style><template>
<div id='container'>
<ejs-blockeditor id="blockeditor" :blocks="blocksData" :blockActionMenuSettings="blockActionMenuSettings"></ejs-blockeditor>
<div id="controls">
<h3>Block Action Menu Configuration Demo</h3>
<div class="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>
Hover over any block in the editor to see the block action menu
</li>
<li>Click on the action menu icon (⋮) next to any block</li>
<li>Notice the custom popup size, action items and disabled tooltips</li>
</ol>
</div>
</div>
</div>
</template>
<script>
import { BlockEditorComponent, ContentType } from "@syncfusion/ej2-vue-blockeditor";
export default {
components: {
'ejs-blockeditor': BlockEditorComponent,
},
data() {
return {
blocksData: [
{
blockType: 'Heading',
properties: { level: 1},
content: [
{
contentType: ContentType.Text,
content: 'Block Action Menu Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Hover over any block and click the drag handle icon to see custom actions.'
}
]
}
],
blockActionMenuSettings: {
enable: true,
popupWidth: '180px',
popupHeight: '110px',
enableTooltip: false,
// Custom action items
items: [
{
id: 'highlight-action',
label: 'Highlight Block',
iconCss: 'e-icons e-highlight',
tooltip: 'Highlight this block'
},
{
id: 'copy-content-action',
label: 'Copy Content',
iconCss: 'e-icons e-copy',
tooltip: 'Copy block content to clipboard'
},
{
id: 'block-info-action',
label: 'Block Info',
tooltip: 'Show block information'
}
],
opening: () => {
// Your actions here
},
closing: () => {
// Your actions here
},
itemSelect: () => {
// Handle custom block actions
}
}
};
},
methods: {
}
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>Inline Toolbar
The Inline Toolbar appears when a text is selected in the editor, providing quick access to common text formatting actions that apply to inline content.
Built-in items
The Inline Toolbar includes below built-in formatting options:
- Text Styles: Bold, Italic, Underline, Strikethrough.
- Superscript/Subscript: For mathematical or scientific notations.
- Case Conversion: Uppercase, Lowercase.
- Text Color: Change text color.
- Background Color: Change background color.
Customize Inline Toolbar
You can use the inlineToolbarSettings property to customize the Inline Toolbar by adding or removing formatting options based on your application’s needs.
Events
The following events are available in the Inline Toolbar.
| Name | Args | Description |
|---|---|---|
| itemClick | ToolbarItemClickEventArgs | Triggers when the user clicks on an inline toolbar item. |
Below example demonstrates how to configure the events in the Inline Toolbar.
<template>
<div id='container'>
<ejs-blockeditor id="blockeditor" :blocks="blocksData" :inlineToolbarSettings="inlineToolbarSettings"></ejs-blockeditor>
<div id="controls">
<h3>Inline Toolbar Configuration Demo</h3>
<div class="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Select any text in the editor to open the Inline Toolbar</li>
<li>Notice the custom popup size, toolbar items and enabled tooltips</li>
</ol>
</div>
</div>
</div>
</template>
<script setup>
import { BlockEditorComponent as EjsBlockeditor, ContentType } from "@syncfusion/ej2-vue-blockeditor";
const customToolbarItems = [ 'Bold', 'Italic' ];
const blocksData = [
{
blockType: 'Heading',
properties: { level: 1},
content: [
{
contentType: ContentType.Text,
content: 'Inline Toolbar Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Select any text in the editor to open the Inline Toolbar'
}
]
}
];
const inlineToolbarSettings = {
popupWidth: '100px',
enable: true,
items: customToolbarItems,
itemClick: () => {
// Handle custom actions here
}
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style><template>
<div id='container'>
<ejs-blockeditor id="blockeditor" :blocks="blocksData" :inlineToolbarSettings="inlineToolbarSettings"></ejs-blockeditor>
<div id="controls">
<h3>Inline Toolbar Configuration Demo</h3>
<div class="instructions">
<p><strong>Instructions:</strong></p>
<ol>
<li>Select any text in the editor to open the Inline Toolbar</li>
<li>Notice the custom popup size, toolbar items and enabled tooltips</li>
</ol>
</div>
</div>
</div>
</template>
<script>
import { BlockEditorComponent, ContentType } from "@syncfusion/ej2-vue-blockeditor";
export default {
components: {
'ejs-blockeditor': BlockEditorComponent,
},
data() {
return {
customToolbarItems : [ 'Bold', 'Italic' ],
blocksData: [
{
blockType: 'Heading',
properties: { level: 1},
content: [
{
contentType: ContentType.Text,
content: 'Inline Toolbar Demo'
}
]
},
{
blockType: 'Quote',
content: [
{
contentType: ContentType.Text,
content: 'Select any text in the editor to open the Inline Toolbar'
}
]
}
],
inlineToolbarSettings: {
popupWidth: '100px',
enable: true,
items: this.customToolbarItems,
itemClick: () => {
// Handle custom actions here
}
}
};
},
methods: {
}
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>