Skip to content

docs (965485): Need to add samples for block editor component in ASP Core and MVC platforms #4355

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 4 commits into from
Jul 2, 2025
Merged

docs (965485): Need to add samples for block editor component in ASP Core and MVC platforms #4355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f6283d
965485: updated the properties name used in the models
Kirupa522 Jul 1, 2025
6758150
Merge branch 'development' of https://github.com/syncfusion-content/e…
Kirupa522 Jul 1, 2025
19b9734
965485: resolved image size error
Kirupa522 Jul 2, 2025
1e21143
Merge branch 'development' into EJ2-965485-BlockEditor
KirupaSF4438 Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,8 @@ You can render Image blocks by setting the [Type](https://help.syncfusion.com/cr
{% endhighlight %}
{% endtabs %}

![Image Block](images/block-image.png)

### Adding template

You can render Template blocks by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Template`. Template blocks enable you to use predefined content structures or custom templates.
Expand Down
2 changes: 2 additions & 0 deletions ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,8 @@ You can render Image blocks by setting the [type](https://help.syncfusion.com/cr
{% endhighlight %}
{% endtabs %}

![Image Block](images/block-image.png)

### Adding template

You can render Template blocks by setting the [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Template`. Template blocks enable you to use predefined content structures or custom templates.
Expand Down
Binary file added ej2-asp-core-mvc/block-editor/images/block-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 15 additions & 15 deletions ej2-asp-core-mvc/code-snippet/block-editor/appearance/appearance.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ public ActionResult Appearance()
{
BlocksData.Add(new Block
{
id = "title-block",
type = "Heading1",
content = new List<object>()
Id = "title-block",
Type = "Heading1",
Content = new List<object>()
{
new
{
Expand All @@ -19,9 +19,9 @@ public ActionResult Appearance()
});
BlocksData.Add(new Block
{
id = "intro-block",
type = "Paragraph",
content = new List<object>()
Id = "intro-block",
Type = "Paragraph",
Content = new List<object>()
{
new
{
Expand All @@ -33,9 +33,9 @@ public ActionResult Appearance()
});
BlocksData.Add(new Block
{
id = "features-heading",
type = "Heading2",
content = new List<object>()
Id = "features-heading",
Type = "Heading2",
Content = new List<object>()
{
new
{
Expand All @@ -46,9 +46,9 @@ public ActionResult Appearance()
});
BlocksData.Add(new Block
{
id = "theme-list-1",
type = "BulletList",
content = new List<object>()
Id = "theme-list-1",
Type = "BulletList",
Content = new List<object>()
{
new
{
Expand All @@ -59,9 +59,9 @@ public ActionResult Appearance()
});
BlocksData.Add(new Block
{
id = "readonly-info",
type = "Paragraph",
content = new List<object>()
Id = "readonly-info",
Type = "Paragraph",
Content = new List<object>()
{
new
{
Expand Down
2 changes: 1 addition & 1 deletion ej2-asp-core-mvc/code-snippet/block-editor/appearance/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<e-blocks>
@foreach (var block in ViewBag.BlocksData)
{
<e-block id="@block.id" type="@block.type.ToString()" content="@block.content"></e-block>
<e-block id="@block.Id" type="@block.Type.ToString()" content="@block.Content"></e-block>
}
</e-blocks>
</ejs-blockeditor>
Expand Down
10 changes: 5 additions & 5 deletions ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/callout.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
public ActionResult Callout()
{
BlocksData.Add(new Block() {
type = "Callout",
children = new List<Block>()
Type = "Callout",
Children = new List<Block>()
{
new Block()
{
id = "callout-content-1",
type = "Paragraph",
content = new List<object>(){
Id = "callout-content-1",
Type = "Paragraph",
Content = new List<object>(){
new{
id = "callout-content-1",
type = "Text",
Expand Down
2 changes: 1 addition & 1 deletion ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<e-blocks>
@foreach (var block in ViewBag.BlocksData)
{
<e-block id="@block.id" type="@block.type.ToString()" content="@block.content" children="@block.children"></e-block>
<e-block id="@block.Id" type="@block.Type.ToString()" content="@block.Content" children="@block.Children"></e-block>
}
</e-blocks>
</ejs-blockeditor>
Expand Down
16 changes: 8 additions & 8 deletions ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/code-block/code.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,36 @@ public ActionResult Code()
{
BlocksData.Add(new Block()
{
type = "Code",
content = new List<object>()
Type = "Code",
Content = new List<object>()
{
new
{
type = "Text",
content = "function greeting() {\n console.log(\"Hello, world!\");\n}"
}
},
codeSettings = new CodeSettingsModel()
CodeSettings = new
{
defaultLanguage = "javascript",
languages = new List<CodeLanguageModel>()
languages = new List<object>()
{
new CodeLanguageModel()
new
{
label = "JavaScript",
language = "javascript"
},
new CodeLanguageModel()
new
{
label = "TypeScript",
language = "typescript"
},
new CodeLanguageModel()
new
{
label = "HTML",
language = "html"
},
new CodeLanguageModel()
new
{
label = "CSS",
language = "css"
Expand Down
2 changes: 1 addition & 1 deletion ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/code-block/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<e-blocks>
@foreach (var block in ViewBag.BlocksData)
{
<e-block id="@block.id" type="@block.type.ToString()" content="@block.content" codeSettings="@block.codeSettings"></e-block>
<e-block id="@block.Id" type="@block.Type.ToString()" content="@block.Content" codeSettings="@block.CodeSettings"></e-block>
}
</e-blocks>
</ejs-blockeditor>
Expand Down
10 changes: 5 additions & 5 deletions ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/divider-block/divider.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ public ActionResult Divider()
{
BlocksData.Add(new Block()
{
type = "Paragraph",
content = new List<object>()
Type = "Paragraph",
Content = new List<object>()
{
new
{
Expand All @@ -18,12 +18,12 @@ public ActionResult Divider()
});
BlocksData.Add(new Block()
{
type = "Divider"
Type = "Divider"
});
BlocksData.Add(new Block()
{
type = "Paragraph",
content = new List<object>()
Type = "Paragraph",
Content = new List<object>()
{
new
{
Expand Down
2 changes: 1 addition & 1 deletion ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/divider-block/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<e-blocks>
@foreach (var block in ViewBag.BlocksData)
{
<e-block id="@block.id" type="@block.type.ToString()" content="@block.content"></e-block>
<e-block id="@block.Id" type="@block.Type.ToString()" content="@block.Content"></e-block>
}
</e-blocks>
</ejs-blockeditor>
Expand Down
16 changes: 8 additions & 8 deletions ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/heading-block/heading.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ public ActionResult Heading()
{
BlocksData.Add(new Block
{
type = "Heading1",
content = new List<object>()
Type = "Heading1",
Content = new List<object>()
{
new
{
Expand All @@ -18,8 +18,8 @@ public ActionResult Heading()
});
BlocksData.Add(new Block
{
type = "Heading2",
content = new List<object>()
Type = "Heading2",
Content = new List<object>()
{
new
{
Expand All @@ -30,8 +30,8 @@ public ActionResult Heading()
});
BlocksData.Add(new Block
{
type = "Heading3",
content = new List<object>()
Type = "Heading3",
Content = new List<object>()
{
new
{
Expand All @@ -42,8 +42,8 @@ public ActionResult Heading()
});
BlocksData.Add(new Block
{
type = "Heading4",
content = new List<object>()
Type = "Heading4",
Content = new List<object>()
{
new
{
Expand Down
2 changes: 1 addition & 1 deletion ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/heading-block/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<e-blocks>
@foreach (var block in ViewBag.BlocksData)
{
<e-block id="@block.id" type="@block.type.ToString()" content="@block.content"></e-block>
<e-block id="@block.Id" type="@block.Type.ToString()" content="@block.Content"></e-block>
}
</e-blocks>
</ejs-blockeditor>
Expand Down
8 changes: 4 additions & 4 deletions ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/image-block/image.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ public ActionResult Image()
{
BlocksData.Add(new Block
{
type = "Image",
imageSettings = new ImageSettingsModel()
Type = "Image",
ImageSettings = new
{
src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png",
altText = "Sample image"
}
});
BlocksData.Add(new Block
{
type = "Paragraph",
content = new List<object>()
Type = "Paragraph",
Content = new List<object>()
{
new
{
Expand Down
2 changes: 1 addition & 1 deletion ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/image-block/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<e-blocks>
@foreach (var block in ViewBag.BlocksData)
{
<e-block id="@block.id" type="@block.type.ToString()" content="@block.content" imageSettings="@block.imageSettings"></e-block>
<e-block id="@block.Id" type="@block.Type.ToString()" content="@block.Content" imageSettings="@block.ImageSettings"></e-block>
}
</e-blocks>
</ejs-blockeditor>
Expand Down
20 changes: 10 additions & 10 deletions ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/list-block/list.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ public ActionResult List()
{
BlocksData.Add(new Block
{
type = "BulletList",
content = new List<object>()
Type = "BulletList",
Content = new List<object>()
{
new
{
Expand All @@ -18,8 +18,8 @@ public ActionResult List()
});
BlocksData.Add(new Block
{
type = "NumberedList",
content = new List<object>()
Type = "NumberedList",
Content = new List<object>()
{
new
{
Expand All @@ -30,29 +30,29 @@ public ActionResult List()
});
BlocksData.Add(new Block
{
type = "CheckList",
content = new List<object>()
Type = "CheckList",
Content = new List<object>()
{
new
{
type = "Text",
content = "Review documentation"
}
},
isChecked = true
IsChecked = true
});
BlocksData.Add(new Block
{
type = "CheckList",
content = new List<object>()
Type = "CheckList",
Content = new List<object>()
{
new
{
type = "Text",
content = "Implement drag and drop functionality"
}
},
isChecked = false
IsChecked = false
});
ViewBag.BlocksData = BlocksData;
return View();
Expand Down
2 changes: 1 addition & 1 deletion ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/list-block/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<e-blocks>
@foreach (var block in ViewBag.BlocksData)
{
<e-block id="@block.id" type="@block.type.ToString()" content="@block.content" isChecked="@block.isChecked"></e-block>
<e-block id="@block.Id" type="@block.Type.ToString()" content="@block.Content" isChecked="@block.IsChecked"></e-block>
}
</e-blocks>
</ejs-blockeditor>
Expand Down
4 changes: 2 additions & 2 deletions ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/paragraph-block/paragraph.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ public ActionResult Paragraph()
{
BlocksData.Add(new Block
{
type = "Paragraph",
content = new List<object>()
Type = "Paragraph",
Content = new List<object>()
{
new
{
Expand Down
2 changes: 1 addition & 1 deletion ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<e-blocks>
@foreach (var block in ViewBag.BlocksData)
{
<e-block id="@block.id" type="@block.type.ToString()" content="@block.content"></e-block>
<e-block id="@block.Id" type="@block.Type.ToString()" content="@block.Content"></e-block>
}
</e-blocks>
</ejs-blockeditor>
Expand Down
4 changes: 2 additions & 2 deletions ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/quote-block/quote.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ public ActionResult Quote()
{
BlocksData.Add(new Block
{
type = "Quote",
content = new List<object>()
Type = "Quote",
Content = new List<object>()
{
new
{
Expand Down
Loading