Get Started with Rich Text Editor

  • 2 minutes to read

This tutorial describes how to build a Blazor Server application with a DevExpress Rich Text Editor (DxRichEdit) component.

You can create a new project or configure an existing project.

Create a New Project (DevExpress Templates)

Follow the steps below to create a project configured to use DevExpress Blazor Rich Text Editor.

  1. Open Visual Studio and click Create a new project on the start page.

  2. In the Create a New Project dialog, select DevExpress v21.2 Blazor App Template Gallery and click Next.

    Create a new application

  3. Specify the project location, and click Create.

  4. In the Template Gallery, select the Visual C# language and the .NET Core framework to display the Blazor platform in the menu. Select the platform and then select the Server Application template. Specify the project name and click Run Wizard.

    Template Gallery

  5. In the Project Wizard, select the Settings tab and set the Add Rich Text Editor Resources option to True to register the editor’s resources in your application.

    Project Wizard - Settings

  6. Optional. Customize other project settings in the wizard. For instance, specify the Rich Text Editor’s culture.

  7. Click Create Project.

Configure an Existing Project (Microsoft Templates)

Follow the steps below to add DevExpress Blazor NuGet packages and register required resources in your project.

You can obtain your NuGet Feed URL and register the DevExpress NuGet feed, or use the DevExpress 21.2 Local package source that is automatically added to your NuGet configuration files if you use the DevExpress .NET Product Installer.

  1. Install the common DevExpress Blazor and Blazor RichEdit NuGet packages.

    • Select ToolsNuGet Package ManagerManage NuGet Packages for Solution.

    • In the invoked dialog, open the Browse tab, select a DevExpress package source, and install the DevExpress.Blazor and DevExpress.Blazor.RichEdit NuGet packages.

      NuGet Package Manager

  2. Register required scripts in the Pages/_Host.cshtml file’s HEAD section.

    If your project uses Bootstrap v4, add the following links:

    <head>
        @* ... *@
        <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
        <link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.css" rel="stylesheet" />
    </head>
    

    If your project uses Bootstrap v5, add the following links:

    <head>
        @* ... *@
        <link href="_content/DevExpress.Blazor/dx-blazor.bs5.css" rel="stylesheet" />
        <link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.bs5.css" rel="stylesheet" />
    </head>
    
  3. Register the DevExpress.Blazor and DevExpress.Blazor.RichEdit namespaces in the _Imports.razor file:

    @using DevExpress.Blazor
    @using DevExpress.Blazor.RichEdit
    
  4. Optional. Apply a DevExpress Bootstrap theme.

Refer to the following section for more information on how to change the Rich Text Editor’s culture: Localization.

Add a Rich Text Editor

Add the <DxRichEdit /> tag to the Pages/Index.razor page.

<DxRichEdit />

Run the application to see the result:

Rich Text Editor