Skip to main content
BuyLog In
Blazor
Search in…
Docs > Rich Text Editor (CTP) > Get Started with Rich Text Editor
A newer version of this page is available. .
All docs
V21.1
Blazor Components
Prerequisites
Supported Browsers
Get Started
Troubleshooting
Demos
Videos
Common Concepts
Data Grid
Grid (CTP)
Pivot Grid
Charts
Reports
Scheduler
Rich Text Editor (CTP)
Get Started with Rich Text Editor
Document Management
Text Operations
Examples
Data Editors
Buttons
Navigation and Layout
File Management
Dashboard (CTP)
XAF (App UI & Security API)
API Reference
Download CHM

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

  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.1 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 Tools → NuGet Package Manager → Manage 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-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-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.

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