Back to Devexpress

Add RichEdit to a .NET Core Application

aspnetcore-400321-rich-edit-get-started-net-core-application.md

latest3.6 KB
Original Source

Add RichEdit to a .NET Core Application

  • Dec 09, 2025
  • 3 minutes to read

This tutorial describes how to add the Rich Text Editor to an ASP.NET Core web application.

1. Install NuGet Packages

  1. Right-click the Dependencies node in Solution Explorer and select the Manage NuGet Packages context menu item.

  2. In the opened NuGet Package Manager window, switch to the Browse tab, select the DevExpress 25.2 Local package source, and install the DevExpress.AspNetCore.RichEdit NuGet package.

2. Configure the Project

  1. Right-click the project node in Solution Explorer and select AddNew Item.

  2. In the invoked Add New Item dialog, select npm Configuration File and click Add to add the package.json file to the project.

  3. Replace the package.json file’s content with the code below:

  4. Right-click the package.json file and select Restore Packages. This command adds a node_modules directory to the application folder.

  5. Allow the application to access files in the node_modules directory. For this purpose, register node_modules files after the default app.UseStaticFiles() method call as follows:

3. Register Static Resources

  1. In the _ViewImports.cshtml file, import the DevExpress.AspNetCore namespace:

  2. Open a view and register the following resources in a header section:

4. Add Control to a Project

Add the Rich Text Editor control to a page. Optionally, customize the control in the following maner:

cshtml
@(Html.DevExpress().RichEdit("richEdit")
    .Width("100%")
    .Height(800)
    .ExportUrl(Url.Action("Export"))
    .AutoCorrect(a => a
        .CorrectTwoInitialCapitals(true)
        .ReplaceTextAsYouType(true)
        .ReplaceInfoCollectionSettings(s => {
            s.CaseSensitive(true);
            s.ReplaceInfoCollection(c => {
                c.Add().What("(c)").With("©");
                c.Add().What("wnwd").With("well-nourished, well-developed");
            });
        })
    )
    .Bookmarks(b => b
        .Visibility(DevExpress.AspNetCore.RichEdit.Visibility.Visible)
        .Color(System.Drawing.Color.Blue)
    )
    .Ribbon(ribbon => ribbon
        .ActiveTabIndex(0)
    )
    .Open("Documents/Example.docx")
)
csharp
public IActionResult Export(string base64, string fileName, DevExpress.AspNetCore.RichEdit.DocumentFormat format, string reason) {
    byte[] fileContents = System.Convert.FromBase64String(base64);
    return Ok();
}

5. Configure Razor Pages Application

Note

This section lists additional steps you should perform to configure an ASP.NET Core Razor Pages web application. Skip these steps if you add the Rich Text Editor to an ASP.NET Core MVC web application.

To allow the Rich Text Editor to save documents on the server, do the following:

  1. Add an anti‑forgery token to every internal request the Rich Text Editor sends to action handlers. This token prevents Cross-Site Request Forgery (CSRF/XSRF) attacks.

  2. Declare a POST action handler in the page model:

  3. Pass this handler to the ExportUrl(String) method as follows: