Editor Menus in ASP.NET MVC Block Editor control
17 Dec 202524 minutes to read
The Block Editor control 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 utilize the CommandMenuSettings property on the Block Editor control to customize the Slash Command menu to include your own custom commands and other modifications.
Show or hide tooltip
By default, the tooltip is displayed when the user hovers over the command item. You can show or hide the tooltip using the EnableTooltip property on the command menu settings.
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 the customization of the Slash Command menu.
@using Syncfusion.EJ2.BlockEditor
<div id='blockeditor-container'>
@Html.EJS().BlockEditor("block-editor").Blocks((List<BlockModel>)ViewData["BlocksData"]).CommandMenu((CommandMenuSettings)ViewData["CommandMenuSettings"]).Render()
<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>
<script>
function filtering(args) {
// Your actions here
}
function itemSelect(args) {
// Handle custom block actions
}
</script>
<style>
#blockeditor-container {
margin: 20px auto;
gap: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#controls {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f8f9fa;
}
.instructions {
padding: 15px;
background-color: #fff3cd;
border-left: 4px solid #ffc107;
border-radius: 4px;
}
.instructions p {
margin-top: 0;
color: #856404;
font-weight: bold;
}
.instructions ol {
margin-bottom: 0;
color: #856404;
}
#output {
margin-top: 15px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
min-height: 100px;
font-family: monospace;
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
border: 1px solid #dee2e6;
}
</style>using Syncfusion.EJ2.BlockEditor;
public List<BlockModel> BlocksData { get; set; }
public List<object> CommandMenuItems { get; set; }
public CommandMenuSettings CommandMenuSettings { get; set; }
public class BlockModel
{
public string id { get; set; }
public string blockType { get; set; }
public object properties { get; set; }
public List<object> content { get; set; }
}
public ActionResult SlashCommand()
{
CommandMenuItems = new List<object>
{
new
{
id = "line-cmd",
type = "Divider",
groupHeader = "Utility",
label = "Insert a Line",
iconCss = "e-icons e-divider",
},
new
{
id = "timestamp-cmd",
groupHeader = "Actions",
label = "Insert Timestamp",
iconCss = "e-icons e-schedule",
}
};
BlocksData = new List<BlockModel>
{
new BlockModel
{
id = "Paragraph",
blockType = "Paragraph",
content = new List<object>
{
new { contentType = "Text", content = "Type \"/\" anywhere in this editor to open the custom slash command menu." }
}
}
};
CommandMenuSettings = new CommandMenuSettings()
{
PopupWidth = "350px",
PopupHeight = "400px",
ItemSelect = "itemSelect",
Filtering = "filtering",
Commands = CommandMenuItems
};
ViewData["CommandMenuItems"] = CommandMenuItems;
ViewData["CommandMenuSettings"] = CommandMenuSettings;
ViewData["BlocksData"] = BlocksData;
return View();
}
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 utilize the ContextMenuSettings property on the Block Editor to customize the Context menu to add specific actions or modify existing ones based on the application needs.
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 the customization of the Context menu.
@using Syncfusion.EJ2.BlockEditor
<div id='blockeditor-container'>
@Html.EJS().BlockEditor("block-editor").Blocks((List<BlockModel>)ViewData["BlocksData"]).ContextMenu((ContextMenuSettings)ViewData["ContextMenuSettings"]).Render()
<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>
<script>
function open(args) {
// Your actions here
}
function close(args) {
// Your actions here
}
function beforeOpen(args) {
// Your actions here
}
function beforeClose(args) {
// Your actions here
}
function itemClick(args) {
// Handle custom block actions
}
</script>
<style>
#blockeditor-container {
margin: 20px auto;
gap: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#controls {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f8f9fa;
}
.instructions {
padding: 15px;
background-color: #fff3cd;
border-left: 4px solid #ffc107;
border-radius: 4px;
}
.instructions p {
margin-top: 0;
color: #856404;
font-weight: bold;
}
.instructions ol {
margin-bottom: 0;
color: #856404;
}
#output {
margin-top: 15px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
min-height: 100px;
font-family: monospace;
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
border: 1px solid #dee2e6;
}
</style>using Syncfusion.EJ2.BlockEditor;
public List<BlockModel> BlocksData { get; set; }
public List<object> ContextMenuItems { get; set; }
public ContextMenuSettings ContextMenuSettings { get; set; }
public class BlockModel
{
public string id { get; set; }
public string blockType { get; set; }
public object properties { get; set; }
public List<object> content { get; set; }
}
public ActionResult ContextMenu()
{
var Items1 = new List<object>(){
new {
id = "bold-item",
text = "Bold",
iconCss = "e-icons e-bold",
},
new {
id = "italic-item",
text = "Italic",
iconCss = "e-icons e-italic",
},
new {
id = "underline-item",
text = "Underline",
iconCss = "e-icons e-underline",
}
};
var Items2 = new List<object>(){
new {
id = "export-json",
text = "Export as JSON",
iconCss = "e-icons e-file-json",
},
new {
id = "export-html",
text = "Export as HTML",
iconCss = "e-icons e-file-html",
},
new {
id = "export-pdf",
text = "Export as PDF",
iconCss = "e-icons e-file-pdf",
}
};
ContextMenuItems = new List<object>
{
new {
id = "format-menu",
text = "Format",
iconCss = "e-icons e-format-painter",
items = Items1
},
new { separator = true },
new {
id = "statistics-item",
text = "Block Statistics",
iconCss = "e-icons e-chart"
},
new {
id = "export-item",
text = "Export Options",
iconCss = "e-icons e-export",
items = Items2
}
};
BlocksData = new List<BlockModel>
{
new BlockModel
{
id = "title-block",
blockType = "Heading",
properties = new { level = 1},
content = new List<object>
{
new { contentType = "Text", content = "Context Menu Demo" }
}
},
new BlockModel
{
id = "intro-block",
blockType = "Quote",
content = new List<object>
{
new
{
contentType = "Text",
content = "Right-click anywhere in this editor to open the custom context menu. Try different areas and blocks."
}
}
}
};
ContextMenuSettings = new ContextMenuSettings()
{
Enable = true,
ShowItemOnClick = true,
Opening = "open",
Closing = "close",
ItemSelect = "itemClick",
Items = ContextMenuItems
};
ViewData["ContextMenuItems"] = ContextMenuItems;
ViewData["ContextMenuSettings"] = ContextMenuSettings;
ViewData["BlocksData"] = BlocksData;
return View();
}
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 utilize the BlockActionsMenuSettings property on the block editor to customize the Block action menu to include block-specific commands relevant to your application. This allows for highly tailored user experiences.
Show or hide tooltip
By default, the tooltip is displayed when the user hovers over the action item. You can show or hide the tooltip using the EnableTooltip property on 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 the customization of the Block action menu.
@using Syncfusion.EJ2.BlockEditor
<div id='blockeditor-container'>
@Html.EJS().BlockEditor("block-editor").Blocks((List<BlockModel>)ViewData["BlocksData"]).BlockActionsMenu((BlockActionMenuSettings)ViewData["BlockActionMenuSettings"]).Render()
<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>
<script>
function open(args) {
// Your actions here
}
function close(args) {
// Your actions here
}
function itemClick(args) {
// Handle custom block actions
}
</script>
<style>
#blockeditor-container {
margin: 20px auto;
gap: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#controls {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f8f9fa;
}
.instructions {
padding: 15px;
background-color: #fff3cd;
border-left: 4px solid #ffc107;
border-radius: 4px;
}
.instructions p {
margin-top: 0;
color: #856404;
font-weight: bold;
}
.instructions ol {
margin-bottom: 0;
color: #856404;
}
#output {
margin-top: 15px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
min-height: 100px;
font-family: monospace;
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
border: 1px solid #dee2e6;
}
</style>using Syncfusion.EJ2.BlockEditor;
public List<BlockModel> BlocksData { get; set; } = new List<BlockModel>();
public List<object> BlockItems { get; set; }
public BlockActionMenuSettings BlockActionMenuSettings { get; set; }
public class BlockModel
{
public string id { get; set; }
public string blockType { get; set; }
public object properties { get; set; }
public List<object> content { get; set; }
}
public ActionResult BlockAction()
{
BlocksData.Add(new BlockModel() {
blockType = "Heading",
properties = new { level = 1},
content = new List<object>()
{
new {
contentType = "Text",
content = "Block Action Menu Demo"
}
}
});
BlocksData.Add(new BlockModel()
{
blockType = "Quote",
content = new List<object>()
{
new {
contentType = "Text",
content = "Hover over any block and click the drag handle icon to see custom actions."
}
}
});
BlockItems = new List<object>()
{
new
{
id = "highlight-action",
label = "Highlight Block",
iconCss = "e-icons e-highlight",
tooltip = "Highlight this block"
},
new
{
id = "copy-content-action",
label = "Copy Content",
iconCss = "e-icons e-copy",
tooltip = "Copy block content to clipboard"
},
new
{
id = "block-info-action",
label = "Block Info",
tooltip = "Show block information"
}
};
BlockActionMenuSettings = new BlockActionMenuSettings()
{
Enable = true,
EnableTooltip = false,
PopupHeight = "110px",
PopupWidth = "180px",
Opening = "open",
Closing = "close",
ItemSelect= "itemClick",
Items = BlockItems
};
ViewBag.BlockItems = BlockItems;
ViewBag.BlocksData = BlocksData;
return View();
}
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 the 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 utilize the InlineToolbarSettings property on the Block Editor to customize the Inline Toolbar to add or remove formatting options based on your application’s needs.
Below example demonstrates how to customize the Inline Toolbar.
Show or hide tooltip
By default, the tooltip is displayed when the user hovers over the toolbar item. You can show or hide the tooltip using the EnableTooltip property on the inline toolbar settings.
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 the customization of the Inline Toolbar.
@using Syncfusion.EJ2.BlockEditor
<div id='blockeditor-container'>
@Html.EJS().BlockEditor("block-editor").Blocks((List<BlockModel>)ViewData["BlocksData"]).InlineToolbar((InlineToolbarSettings)ViewData["InlineToolbarSettings"]).Render()
<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>
<script>
function open(args) {
// Your actions here
}
function close(args) {
// Your actions here
}
function itemClicked(args) {
// Handle custom block actions
}
</script>
<style>
#blockeditor-container {
margin: 20px auto;
gap: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#controls {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f8f9fa;
}
.instructions {
padding: 15px;
background-color: #fff3cd;
border-left: 4px solid #ffc107;
border-radius: 4px;
}
.instructions p {
margin-top: 0;
color: #856404;
font-weight: bold;
}
.instructions ol {
margin-bottom: 0;
color: #856404;
}
#output {
margin-top: 15px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
min-height: 100px;
font-family: monospace;
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
border: 1px solid #dee2e6;
}
</style>using Syncfusion.EJ2.BlockEditor;
public List<BlockModel> BlocksData { get; set; }
public List<object> InlineToolbarItems { get; set; }
public InlineToolbarSettings InlineToolbarSettings { get; set; }
public class BlockModel
{
public string id { get; set; }
public string blockType { get; set; }
public object properties { get; set; }
public List<object> content { get; set; }
}
public ActionResult InlineToolbar()
{
InlineToolbarItems = new List<object>
{
new {
id = "clear",
iconCss = "e-icons e-format-painter",
item = "Custom",
tooltip = "Format Painter"
},
new {
id = "highlight",
iconCss = "e-icons e-highlight",
item = "Custom",
tooltip = "Highlight"
}
};
BlocksData = new List<BlockModel>
{
new BlockModel
{
id = "title-block",
blockType = "Heading",
properties = new { level = 1},
content = new List<object>
{
new { contentType = "Text", content = "Inline Toolbar Demo" }
}
},
new BlockModel
{
id = "intro-block",
blockType = "Quote",
content = new List<object>
{
new
{
contentType = "Text",
content = "Select any text in the editor to open the Inline Toolbar"
}
}
}
};
InlineToolbarSettings = new InlineToolbarSettings()
{
Enable = true,
PopupWidth = "80px",
ItemClick = "itemClicked",
Items = InlineToolbarItems
};
ViewData["InlineToolbarItems"] = InlineToolbarItems;
ViewData["InlineToolbarSettings"] = InlineToolbarSettings;
ViewData["BlocksData"] = BlocksData;
return View();
}