Implement Syncfusion Block Editor control in ASP.NET Core applications using Razor Tag Helpers. Use this skill when working with Syncfusion Block Editor, EJ2 BlockEditor, ASP.NET Core block-based content editing, or <ejs-blockeditor> syntax. Covers block management, nested content structures, drag-and-drop functionality, content sanitization, installation, tag helper setup, block types, content manipulation, events, menus, and advanced features for creating rich block-based document editors.
A comprehensive skill for implementing Syncfusion EJ2 Block Editor in ASP.NET Core applications using Razor Tag Helpers. This skill covers setup, block configuration, content manipulation, events, and best practices for creating block-based document editors.
The Syncfusion Block Editor is a versatile, block-based content editor that allows users to create and edit structured documents using discrete content blocks. Key capabilities include:
📄 Read: references/getting-started.md
📄 Read: references/built-in-blocks.md
📄 Read: references/blockeditor-menus.md
📄 Read: references/methods-and-api.md
📄 Read: references/advanced-features.md
Step 1: Install NuGet Package
Install-Package Syncfusion.EJ2.AspNet.Core
Step 2: Register in _ViewImports.cshtml
@addTagHelper *, Syncfusion.EJ2
Step 3: Add CSS and Scripts in _Layout.cshtml
<head>
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/dist/ej2.min.css" />
</head>
<body>
@RenderBody()
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<ejs-scripts></ejs-scripts>
@RenderSection("Scripts", required: false)
</body>
Step 4: Create Block Editor in View
@using Syncfusion.EJ2.BlockEditor
<div id='blockeditor-container'>
<ejs-blockeditor id="block-editor" blocks="@ViewBag.BlocksData"></ejs-blockeditor>
</div>
<style>
#blockeditor-container {
margin: 20px auto;
}
</style>
Step 5: Configure Blocks in Controller
using Syncfusion.EJ2.BlockEditor;
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 IActionResult Index()
{
var blocks = new List<BlockModel>
{
new BlockModel
{
id = "heading-1",
blockType = "Heading",
properties = new { level = 1 },
content = new List<object>
{
new { contentType = "Text", content = "Welcome to Block Editor" }
}
},
new BlockModel
{
id = "paragraph-1",
blockType = "Paragraph",
content = new List<object>
{
new { contentType = "Text", content = "Start creating your content with blocks!" }
}
}
};
ViewBag.BlocksData = blocks;
return View();
}
var blockEditorObj = ej.base.getInstance(document.getElementById('block-editor'), ejs.blockeditor.BlockEditor);
const newBlock = {
id: 'new-paragraph',
blockType: 'Paragraph',
content: [
{
contentType: "Text",
content: 'This is a newly added block'
}
]
};
// Add after a specific block
blockEditorObj.addBlock(newBlock, 'existing-block-id', true);
new BlockModel
{
blockType = "CollapsibleHeading",
content = new List<object>
{
new { contentType = "Text", content = "Section Title" }
},
properties = new
{
level = 1,
isExpanded = true,
children = new List<BlockModel>
{
new BlockModel
{
blockType = "Paragraph",
content = new List<object>
{
new { contentType = "Text", content = "Hidden content goes here" }
}
}
}
}
}
<ejs-blockeditor id="block-editor">
<e-blockeditor-pastesettings
allowedStyles="@(new string[] { "font-weight", "font-style", "text-decoration" })"
deniedTags="@(new string[] { "script", "iframe", "form" })"
keepFormat="true">
</e-blockeditor-pastesettings>
</ejs-blockeditor>
var commandMenuItems = new List<object>
{
new
{
id = "timestamp",
groupHeader = "Actions",
label = "Insert Timestamp",
iconCss = "e-icons e-schedule"
},
new
{
id = "separator",
type = "Divider",
groupHeader = "Utility",
label = "Insert Divider",
iconCss = "e-icons e-divider"
}
};
ViewBag.CommandMenuItems = commandMenuItems;
<ejs-blockeditor id="block-editor"
readOnly="true"
blocks="@ViewBag.BlocksData">
</ejs-blockeditor>
| Property | Type | Description | Default |
|---|---|---|---|
id | string | Unique identifier for the Block Editor instance | - |
blocks | List<BlockModel> | Initial block content | [] |
height | string | Height of the editor (px, vh, %) | auto |
width | string | Width of the editor (px, %) | 100% |
readOnly | bool | Enable read-only mode | false |
cssClass | string | Custom CSS class for styling | - |
enableDragAndDrop | bool | Enable block drag-and-drop | true |
enableRtl | bool | Enable right-to-left layout | false |
locale | string | Localization culture (e.g., "de", "es") | "en" |
undoRedoStack | int | Number of undo/redo steps | 30 |
keyConfig | object | Keyboard shortcuts configuration | default shortcuts |
When implementing a Syncfusion Block Editor in ASP.NET Core: