Skip to main content
BuyLog In
Blazor
Search in…
Docs > Components > Rich Text Editor > Get Started
All docs
V23.2
Blazor Components
Prerequisites
Supported Browsers
Get Started
Demos
Examples
Videos
Common Concepts
Components
Grid
Charts
Dashboard
Data Editors
Dialogs and Windows
File Management
Layout
Reports
Pivot Grid
Rich Text Editor
Get Started
Document Management
Mail Merge
Examples
Scheduler
Navigation
Utility Controls
Backend Web API Service
Office File API
DevExtreme Components
Styling and Themes
Security Considerations
Troubleshooting
Blazor & WinForms App UI Framework (Powered by EF Core)
Maintenance Mode
API Reference
Download CHM

Get Started with Blazor Rich Text Editor

  • 2 minutes to read

This topic describes how to create a new project or configure an existing project to use a DevExpress Rich Text Editor component.

Create a New Project (DevExpress Templates)

Follow this tutorial to create a Blazor application based on DevExpress project templates. To add the Rich Text Editor to the application, set the Add Rich Text Editor Resources option to true on the Settings tab.

Project Wizard - Settings

Configure an Existing Project (Microsoft Templates)

Follow the steps below to incorporate the Rich Text Editor into a Blazor app created with a Microsoft template.

1. Register Common DevExpress Resources

Install the DevExpress.Blazor NuGet package and register DevExpress resources used for all DevExpress Blazor components.

Read Tutorial: Microsoft Templates (DevExpress Installation)

2. Register Rich Text Editor Resources

  1. Install the DevExpress.Blazor.RichEdit NuGet package.

    1. Select Tools → NuGet Package Manager → Manage NuGet Packages for Solution.

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

    The DevExpress package is automatically added as a package source to your NuGet configuration files if you use the DevExpress .NET Product Installer.

    NuGet Package Manager

  2. Register the Rich Text Editor’s CSS file in the <head> section of one of the following files:

    • Pages/_Layout.cshtml for Blazor Server applications created with a Microsoft template in .NET 6
    • Pages/_Host.cshtml for Blazor Server applications created with a DevExpress Template in .NET 6 and .NET 7 or with a Microsoft template in .NET 7
    • wwwroot/index.html for Blazor WebAssembly or Hybrid applications in .NET 6 and .NET 7
    • Components/App.razor for Blazor Web applications in .NET 8

    If you do not implement any solutions to refresh cached resources on user machines, add the asp-append-version attribute to the theme link. The attribute ensures that web browsers on user machines use the actual version of DevExpress CSS resources instead of a cached version. Refer to HTTP caching for more information about the browser cache.

    <head>
    @* ... *@
    @* for Bootstrap 5 *@
    <link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.bs5.css" rel="stylesheet" asp-append-version="true" />

    @* for Bootstrap 4 *@
    <link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.css" rel="stylesheet" asp-append-version="true" />
</head>

  3. Register the DevExpress.Blazor.Office and DevExpress.Blazor.RichEdit namespaces in the Components/Imports.razor file:

    @using DevExpress.Blazor.Office
@using DevExpress.Blazor.RichEdit

  4. Optional. Set up the Rich Text Editor’s culture. See the following topic for details: 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