syncfusion-content · IndrajithSrinivasan · Aug 22, 2025 · Aug 21, 2025 · Aug 21, 2025 · Aug 21, 2025
diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/blocks.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/blocks.md
diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md
@@ -0,0 +1,88 @@
+---
+layout: post
+title: Blocks in ##Platform_Name## Block Editor control | Syncfusion
+description: Checkout and learn about Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Block Editor
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Blocks in ##Platform_Name## Block Editor control
+
+The Block Editor control enables you to create block-based content editing solution using various types of blocks. The [Blocks](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Blocks.html) property 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 `blocks`, allowing for better structure and formatting options.
+
+You can configure blocks with various properties such as [Id](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Id), [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type), [Content](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Content), [Children](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Children) and more to create rich, 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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Indent) property. This property accepts a numeric value that determines how deeply a block is nested from the left margin.
+
+By default, the [Indent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Indent) property is set to `0`.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/block-editor/blocks/indent/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Indent.cs" %}
+{% include code-snippet/block-editor/blocks/indent/indent.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Block Indent](images/block-indent.png)
+
+## Configure CSS Class
+
+You can apply custom styling to individual blocks using the [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_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.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/block-editor/blocks/cssClass/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="CssClass.cs" %}
+{% include code-snippet/block-editor/blocks/cssClass/cssclass.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Block cssClass](images/block-cssClass.png)
+
+## Configure templates
+
+The Block Editor allows you to use custom templates for specialized content using the [Template](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Template)  property. Templates can be defined as strings, functions, or HTML elements.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Template.cs" %}
+{% include code-snippet/block-editor/blocks/blockTypes/template-block/template.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Template Block](images/block-template.png)
diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/code-block.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/code-block.md
@@ -0,0 +1,75 @@
+---
+layout: post
+title: Code Block in ##Platform_Name## Block Editor control | Syncfusion
+description: Checkout and learn about Code Block with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Block Editor
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Code Blocks in ##Platform_Name## Block Editor control
+
+You can render Code blocks by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Code`. By setting the `Props` property, you can configure the languages available for syntax highlighting and the default language. The default language is `javascript`.
+
+## Configure code properties
+
+For Code blocks, you can configure syntax highlighting and language options using the [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property.
+
+The code [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property supports the following options:
+
+| Property | Description | Default Value |
+|----------|-------------|---------------|
+| languages | Array of language options for syntax highlighting | [] |
+| defaultLanguage | The default language to use for syntax highlighting | 'javascript' |
+
+Each language object in the `languages` array should have:
+- `language`: The language value used for syntax highlighting
+- `label`: The display name shown in the language selector
+
+#### Type & Props
+```typescript
+// Adding Code block
+{
+    Type = BlockType.Code,
+    Content = new List<object>()
+    {
+            new 
+            {
+                    type = "Text",
+                    content = "function greeting() {\n  console.log(\"Hello, world!\");\n}"
+            }
+    },
+    Props = new
+    {
+            defaultLanguage = "javascript",
+            languages = new List<object>()
+            {
+                    new
+                    {
+                            label = "JavaScript",
+                            language = "javascript"
+                    },
+                    new
+                    {
+                            label = "TypeScript",
+                            language = "typescript"
+                    }
+            }
+    }
+    }
+```
+
+Below example illustrates how to render the different code block in the Block Editor.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Code.cs" %}
+{% include code-snippet/block-editor/blocks/blockTypes/code-block/code.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Code Block](images/block-code.png)
diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/embed.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/embed.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title: Embed Blocks in ##Platform_Name## Block Editor control | Syncfusion
+description: Checkout and learn about Embed Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Block Editor
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Embed Blocks in ##Platform_Name## Block Editor control
+
+Block Editor supports addition of embeds to help you organize, showcase contents and format your content effectively.
+
+## Image Block
+
+You can use the `image` block to showcase an image content within your editor.
+
+### Configure image block
+
+You can render Image blocks by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Image`. By setting the `Props` property, you can configure the image source, allowed file types, and display dimensions etc.
+
+The image [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property supports the following options:
+
+| Property | Description | Default Value |
+|----------|-------------|---------------|
+| saveFormat | Specifies the format to save the image | Base64 |
+| src | Specifies the image path | ' '|
+| allowedTypes | Specifies the allowed image file types that can be uploaded | ['.jpg', '.jpeg', '.png'] |
+| width | Specifies the display width of the image | ' ' |
+| height | Specifies the display height of the image | ' '|
+| minWidth | Specifies the minimum width of the image in pixels or as a string unit | 40|
+| maxWidth | Specifies the maximum width of the image in pixels or as a string unit | ' '|
+| minHeight | Specifies the minimum height of the image in pixels or as a string unit | 40|
+| maxHeight | Specifies the maximum height of the image in pixels or as a string unit | ' '|
+| altText | Specifies the alternative text to be displayed when the image cannot be loaded | ' '|
+| cssClass | Specifies one or more CSS classes to be applied to the image element | ' ' |
+| readOnly | Specifies whether the image is in read-only mode | false
+
+
+#### Type & Props
+
+```typescript
+// Adding image block
+ {
+    Type = BlockType.Image,
+    Props = new
+    {
+        src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png",
+        altText = "Sample image"       
+        saveFormat= "Base64",
+        allowedTypes = ['.png', '.gif'],
+        width = '200px',
+        height = '100px',
+        minWidth = 50,
+        maxWidth = 500,
+        minHeight = 50,
+        maxHeight = 300,
+        cssClass = 'img-custom',
+        readOnly = true
+    }
+}
+```
+
+The below sample demonstrates the configuration of image block in the Block Editor.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/block-editor/blocks/blockTypes/image-block/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Image.cs" %}
+{% include code-snippet/block-editor/blocks/blockTypes/image-block/image.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Image Block](images/block-image.png)