Search results

Create a Blazor client-side Word processing app

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

Steps to get started with Word processor component for Blazor:

  1. Select Create a new project from the Visual Studio dashboard.

    new project in aspnetcore blazor

  2. Select ASP.NET Core Web Application from the template and click the Next button.

    asp.net core template

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

    asp.net core project configuration

  4. Select Blazor (client-side) 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.0 are selected at the top.

    select framework

  5. Install the Syncfusion.EJ2.WordEditor.Blazor NuGet package from NuGet.org to the newly created application by using the NuGet Package Manager. Ensure to check the Include prerelease option. Right-click the project and select Manage NuGet Packages.

  6. Search Syncfusion.EJ2.WordEditor.Blazor keyword in the Browse tab and install Syncfusion.EJ2.WordEditor.Blazor NuGet package in the application. select nuget

  7. Open the ~/_Imports.razor file and import the Syncfusion.EJ2.DocumentEditor.Blazor namespace.

    @using Syncfusion.EJ2.DocumentEditor.Blazor
  8. Add the client-side resources through CDN or local npm package to the <head> element of the ~/wwwroot/index.html page.

    <head>
        .......
    
        .......
    
        <link href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />
        <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
    </head>
  9. 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.

    <EjsDocumentEditorContainer EnableToolbar=true></EjsDocumentEditorContainer>
  10. Run the application. The Word processor component will be rendered in the web browser.

    DocumentEditor Sample