Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

WebAssembly App in Visual Studio 2019 in Blazor DocumentEditor component

03 Aug 2021 / 2 minutes to read

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

Steps to get started with Word processor component for Blazor:

  1. Install the essential project templates in the Visual Studio 2019 by running the below command line in the command prompt.
Copied to clipboard
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5
  1. Select Create a new project from the Visual Studio dashboard.

new project in blazor

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

Blazor app

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

Blazor project configuration

  1. 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

  1. 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.
  2. Search Syncfusion.Blazor.WordProcessor keyword in the Browse tab and install Syncfusion.Blazor.WordProcessor NuGet package in the application. select nuget
  3. Open the ~/_Imports.razor file and import the Syncfusion.Blazor.DocumentEditor.
Copied to clipboard
@using Syncfusion.Blazor.DocumentEditor
  1. 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.
Copied to clipboard
<SfDocumentEditorContainer EnableToolbar=true></SfDocumentEditorContainer>
  1. Open the ~/Startup.cs file and register the Syncfusion Blazor Service.
Copied to clipboard
 public void ConfigureServices(IServiceCollection services) {
     .......
     .......
     services.AddSyncfusionBlazor();
 }
  1. Add the Syncfusion bootstrap4 theme in the <head> element of the ~/wwwroot/index.html page.
Copied to clipboard
<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/19.2.49/styles/bootstrap4.css.

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

DocumentEditor Sample

You can also explore our Blazor Word Processor example to know how to render and configure the document editor.

Previous
Next