WebAssembly App in Visual Studio 2019 in Blazor DocumentEditor component

20 Apr 2021 / 2 minutes to read

This article provides the step-by-step instructions to integrate the Word processor component in Blazor WebAssembly application using Visual Studio 2019.

Steps to get started with Word processor component for Blazor:

Install the essential project templates in the Visual Studio 2019 by running the below command line in the command prompt.

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5

Select Create a new project from the Visual Studio dashboard.

new project in blazor

Select Blazor App from the template and click the Next button.

Blazor app

In the project configuration window, click the Create button to create a new project with the default project configuration.

Blazor project configuration

Select Blazor WebAssembly App from the dashboard and click Create button to create a new Blazor client-side application. Make sure that .NET Core and ASP.NET Core 3.1 are selected at the top.

select framework

Install the Syncfusion.Blazor.WordProcessor NuGet package from NuGet.org to the newly created application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.
Search Syncfusion.Blazor.WordProcessor keyword in the Browse tab and install Syncfusion.Blazor.WordProcessor NuGet package in the application.
Open the ~/_Imports.razor file and import the Syncfusion.Blazor.DocumentEditor.

@using Syncfusion.Blazor.DocumentEditor

Add the Syncfusion Word processor component (a.k.a DocumentEditor) to any web pages (razor) in the Pages folder. For example, the DocumentEditorContainer component is added in the ~/Pages/Index.razor page.

<SfDocumentEditorContainer EnableToolbar=true></SfDocumentEditorContainer>

Open the ~/Startup.cs file and register the Syncfusion Blazor Service.

 public void ConfigureServices(IServiceCollection services) {
     .......
     .......
     services.AddSyncfusionBlazor();
 }

Add the Syncfusion bootstrap4 theme in the <head> element of the ~/wwwroot/index.html page.

<head>
    ....
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>

Note: The same theme file can be referred through the CDN version by using https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css.

Run the application. The Word processor component will be rendered in the web browser.

DocumentEditor Sample