How can I help you?
Getting Started with Blazor Block Editor in Blazor Web App
31 Mar 20269 minutes to read
The Blazor Block Editor is a modular, block-based content editor component that enables rich, structured content creation. It provides an intuitive interface for building documents, articles, and collaborative content using customizable blocks such as headings, paragraphs, lists, and more.
This section explains how to integrate the Blazor Block Editor component into a Blazor Web App using Visual Studio, Visual Studio Code, and the .NET CLI.
Prerequisites
Create a new Blazor Web App in Visual Studio
Create a Blazor Web App using Visual Studio via the Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to the Blazor Web App Getting Started documentation.
Prerequisites
Create a new Blazor Web App in Visual Studio Code
Create a Blazor Web App using Visual Studio Code via the Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to the Blazor Web App Getting Started documentation.
For example, in a Blazor Web App with the Auto interactive render mode, use the following commands in the integrated terminal (Ctrl+`).
dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.ClientPrerequisites
Install the latest version of .NET SDK. If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
dotnet --versionCreate a Blazor Web App using .NET CLI
Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS/Linux). For detailed instructions, refer to the Blazor Web App Getting Started documentation.
For example, in a Blazor Web App with the Auto interactive render mode, use the following commands:
dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.ClientThis command creates a new Blazor Web App and places it in a new directory called BlazorWebApp inside the current location. See the Create a Blazor App and dotnet new CLI command topics for more details.
Install Syncfusion® Blazor packages
Install Syncfusion.Blazor.BlockEditor and Syncfusion.Blazor.Themes NuGet packages into your project.
Alternatively, run the following commands in the Package Manager Console to achieve the same.
Install-Package Syncfusion.Blazor.BlockEditor -Version 33.1.44
Install-Package Syncfusion.Blazor.Themes -Version 33.1.44If using the WebAssembly or Auto render modes in the Blazor Web App, install these packages in the client project.
NOTE
All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.
Add Import Namespaces
After the packages are installed, open the ~/_Imports.razor file in the client project and import the Syncfusion.Blazor and Syncfusion.Blazor.BlockEditor namespaces.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.BlockEditorRegister Syncfusion® Blazor Service
Register the Syncfusion® Blazor Service in the Program.cs file of the Blazor Web App.
....
using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor();
....Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script reference in the ~/Components/App.razor file.
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
....
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>NOTE
Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in the Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in the Blazor application.
Add Syncfusion® Blazor Block Editor component
Add the Syncfusion® Blazor Block Editor component in the ~/Components/Pages/*.razor file. If the interactivity location is set to Per page/component in the Web App, define a render mode at top of the ~Pages/*.razor file. (e.g. InteractiveServer, InteractiveWebAssembly or InteractiveAuto).
NOTE
If an Interactivity Location is set to
GlobalwithAutoorWebAssembly, the render mode is already configured in theApp.razorfile by default.
@* Define desired render mode here *@
@rendermode InteractiveAuto<SfBlockEditor></SfBlockEditor>- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Block Editor component in the default web browser.
Configure blocks
The Block Editor uses a block-based content structure where each block represents a specific content type (heading, paragraph, list, etc.). The Blocks property manages and configures these blocks, allowing full control over the content structure and presentation.
<SfBlockEditor @bind-Blocks="blockDataOverview">
</SfBlockEditor>
@code {
private List<BlockModel> blockDataOverview = new EditorBlockData().GetBlockDataOverview();
public class EditorBlockData
{
public List<BlockModel> GetBlockDataOverview()
{
List<BlockModel> blockDataOverview = new List<BlockModel>
{
new BlockModel
{
BlockType = BlockType.Heading,
Properties = new HeadingBlockSettings{ Level=2 },
Content =
{
new ContentModel
{
ContentType = ContentType.Text,
Content = "Getting Started with Block Editor"
}
}
},
new BlockModel
{
BlockType = BlockType.Paragraph,
Content =
{
new ContentModel { ContentType = ContentType.Text, Content = "Welcome to" },
new ContentModel { ContentType = ContentType.Text, Content = " Block Editor", Properties = new TextContentSettings { Styles = new StyleModel { Bold = true } } },
new ContentModel { ContentType = ContentType.Text, Content = " - your flexible, modular workspace for creating rich, structured content. Whether you're drafting documents, brainstorming ideas, or collaborating with your team, Block Editor makes it simple and intuitive." }
}
},
new BlockModel { BlockType = BlockType.Paragraph, Content = new List<ContentModel>() }
};
return blockDataOverview;
}
}
}
NOTE