Get Started with Rich Text Editor
- 3 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.
Open Visual Studio and click Create a new project on the start page.
In the Create a New Project dialog, select DevExpress v21.2 Blazor App Template Gallery and click Next.
Specify the project location, and click Create.
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.
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.
Optional. Customize other project settings in the wizard. For instance, specify the Rich Text Editor’s culture.
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.
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
andDevExpress.Blazor.RichEdit
NuGet packages.
Register required scripts in the
Pages/_Host.cshtml
(for .NET 5.0) orPages/_Layout.cshtml
(for .NET 6.0) 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>
Register the DevExpress.Blazor and DevExpress.Blazor.RichEdit namespaces in the
_Imports.razor
file:@using DevExpress.Blazor @using DevExpress.Blazor.RichEdit
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: