Get Started with Rich Text Editor
- 2 minutes to read
This topic describes how to build a Blazor Server application with a DevExpress Rich Text Editor component.
You can create a new project or configure an existing project to use the Rich Text Editor.
Create a New Project (DevExpress Templates)
Follow this tutorial to create a Blazor application based on DevExpress project templates. Specify additional options in the DevExpress Blazor Project Wizard to add the Rich Text Editor to the application:
On the Settings tab, set the Add Rich Text Editor Resources option to True to register the editor’s resources.
On the Localization tab, select the Rich Text Editor’s culture.
Configure an Existing Project (Microsoft Templates)
Follow the steps below to incorporate the Rich Text Editor into a Blazor Server 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.
2. Register Rich Text Editor Resources
Install the DevExpress.Blazor.RichEdit NuGet package.
Select Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
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.
Register the Rich Text Editor’s CSS file in the Pages/_Layout.cshtml file’s HEAD section.
<head> @* ... *@ @* for Bootstrap 5 *@ <link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.bs5.css" rel="stylesheet" /> @* for Bootstrap 4 *@ <link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.css" rel="stylesheet" /> </head>Register the DevExpress.Blazor.Office and DevExpress.Blazor.RichEdit namespaces in the _Imports.razor file:
@using DevExpress.Blazor.Office @using DevExpress.Blazor.RichEditOptional. 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:
