Blocks in ASP.NET Core Block Editor control
17 Dec 202524 minutes to read
The Block Editor control enables you to create block-based content editing solution using various types of blocks. The blocks tag helper allows you to define and manage the content structure of your editor.
Blocks
Blocks are the fundamental building elements of the Block Editor. Each block represents a distinct content unit such as a Paragraph, Heading, List, or specialized content like Code Snippets or Images. The Block Editor organizes content as a collection of e-block tag helper, allowing for better structure and formatting options.
You can configure blocks with various properties such as id, blockType, content and more to create rich and structured editor.
Block types
The Block Editor supports multiple block types. Each block type offers different formatting and functionality options:
| Built-in Block Types | Description |
|---|---|
| Paragraph | Default block type for regular text content. |
| Heading1 to Heading4 | Different levels of headings for document structure. |
| Checklist | Interactive to-do lists with checkable items. |
| BulletList | Unordered lists with bullet points. |
| NumberedList | Ordered lists with sequential numbering. |
| Code | Formatted code blocks with syntax highlighting. |
| Quote | Styled block for quotations. |
| Callout | Highlighted block for important information. |
| Divider | Horizontal separator line. |
| CollapsibleParagraph and CollapsibleHeading1-4 | Collapsible content blocks. |
| Image | Block for displaying images. |
| Template | Predefined custom templates. |
Configure indent
You can specify the indentation level of a block using the indent property. This property accepts a numeric value that determines how deeply a block is nested from the left margin.
By default, the indent property is set to 0.
@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 List<BlockModel> BlocksData { get; set; } = new List<BlockModel>();
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 int indent { get; set; }
}
public ActionResult Indent()
{
BlocksData.Add(new BlockModel
{
blockType = "Paragraph",
content = new List<object>()
{
new
{
content = "This is a paragraph with no indentation (indent: 0)"
}
},
indent= 0
});
BlocksData.Add(new BlockModel
{
blockType = "Paragraph",
content = new List<object>()
{
new
{
contentType = "Text",
content = "This paragraph has one level of indentation (indent: 1)"
}
},
indent= 1
});
BlocksData.Add(new BlockModel
{
blockType = "Paragraph",
content = new List<object>()
{
new
{
contentType = "Text",
content = "This paragraph has two levels of indentation (indent: 2)"
}
},
indent= 2
});
BlocksData.Add(new BlockModel
{
blockType = "Paragraph",
content = new List<object>()
{
new
{
contentType = "Text",
content = "Back to no indentation"
}
},
indent = 0
});
ViewBag.BlocksData = BlocksData;
return View();
}
Configure CSS Class
You can apply custom styling to individual blocks using the cssClass property. This property accepts a string containing one or more CSS class names.
Custom CSS classes allow you to define specialized styling for specific blocks in your editor.
@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;
}
/* Custom CSS for blocks */
.e-block.info-block, .e-block.warning-block, .e-block.success-block, .e-block.error-block {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
margin-bottom: 5px;
border-left: 4px solid;
}
.e-block.info-block {
background-color: #e6f3ff;
border-left-color: #007bff;
color: #004085;
}
.e-block.warning-block {
background-color: #fff8e1;
border-left-color: #ffc107;
color: #856404;
}
.e-block.success-block {
background-color: #e8f5e9;
border-left-color: #28a745;
color: #155724;
}
.e-block.error-block {
background-color: #fdecea;
border-left-color: #dc3545;
color: #721c24;
}
.e-block.custom-font {
font-family: 'Georgia', serif;
font-size: 18px;
color: #4a4a4a;
border-bottom: 2px dotted #ccc;
padding-top: 10px;
padding-bottom: 10px;
}
</style>using Syncfusion.EJ2.BlockEditor;
public List<BlockModel> BlocksData { get; set; } = new List<BlockModel>();
public class BlockModel
{
public string id { get; set; }
public string blockType { get; set; }
public string CssClass { get; set; }
public object properties { get; set; }
public List<object> content { get; set; }
}
public ActionResult CssClass()
{
BlocksData.Add(new BlockModel
{
blockType = "Heading",
properties = new { level = 1 },
content = new List<object>()
{
new
{
contentType = "Text",
content = "Custom CSS Classes in Block Editor"
}
}
});
BlocksData.Add(new BlockModel
{
blockType = "Paragraph",
content = new List<object>()
{
new
{
content = "Default paragraph block"
}
}
});
BlocksData.Add(new BlockModel
{
blockType = "Paragraph",
content = new List<object>()
{
new
{
contentType = "Text",
content = "This is an info block"
}
},
CssClass = "info-block"
});
BlocksData.Add(new BlockModel
{
blockType = "Paragraph",
content = new List<object>()
{
new
{
contentType = "Text",
content = "This is a warning block"
}
},
CssClass = "warning-block"
});
BlocksData.Add(new BlockModel
{
blockType = "Paragraph",
content = new List<object>()
{
new
{
contentType = "Text",
content = "This is a success block"
}
},
CssClass = "success-block"
});
BlocksData.Add(new BlockModel
{
blockType = "Paragraph",
content = new List<object>()
{
new
{
contentType = "Text",
content = "This is an error block"
}
},
CssClass = "error-block"
});
BlocksData.Add(new BlockModel
{
blockType = "Paragraph",
content = new List<object>()
{
new
{
contentType = "Text",
content = "This is a custom font block"
}
},
CssClass = "custom-font"
});
ViewBag.BlocksData = BlocksData;
return View();
}
Configure templates
The Block Editor allows you to use custom templates for specialized content using the template property. Templates can be defined as strings, functions, or HTML elements.
@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 List<BlockModel> BlocksData { get; set; } = new List<BlockModel>();
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 Template()
{
BlocksData.Add(new BlockModel
{
blockType = "Template",
Template = "<div class=\"notification-card\">\r\n <div class=\"notification-header\">\r\n <span class=\"notification-icon\">📢</span>\r\n <h3 class=\"notification-title\">Important Announcement</h3>\r\n </div>\r\n <div class=\"notification-content\">\r\n <p>The system will be undergoing maintenance on Saturday from 2:00 AM to 4:00 AM.</p>\r\n <p>Please save your work before this time to prevent any data loss.</p>\r\n </div>\r\n </div>"
});
ViewBag.BlocksData = BlocksData;
return View();
}