OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-blockeditor
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 and collaborative editing features, real-time multi-user editing, Yjs integration, user presence and remote cursors, document version history. 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.
npx skills add syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-blockeditor
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/drag-drop-and-content.md
📄 Read: references/methods-and-api.md
📄 Read: references/styling-and-appearance.md
📄 Read: references/advanced-features.md
📄 Read: references/collaborative-editing.md
Step 1: Install NuGet Package
Step 2: Register in _ViewImports.cshtml
Step 3: Add CSS and Scripts in _Layout.cshtml
Step 4: Create Block Editor in View
Step 5: Configure Blocks in Controller
| Property | Type | Description | Default |
|---|---|---|---|
id | string | Unique identifier for the Block Editor instance | - |
blocks | List | 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:
@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>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
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>