Add RichEdit to a .NET Core Application

• Aug 08, 2024
• 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 24.1 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 Add → New 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:

   package.json

   {
     "version": "1.0.0",
     "name": "asp.net",
     "private": true,
     "dependencies": {
       "devextreme-dist": "24.1.7",
       "devexpress-richedit": "24.1.7"
     }
   }
   

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:

   Program.cs

   using Microsoft.Extensions.FileProviders;
   using Microsoft.AspNetCore.Mvc;
   //...
   app.UseStaticFiles();
   app.UseStaticFiles(new StaticFileOptions {
       FileProvider=new PhysicalFileProvider(Path.Combine(app.Environment.ContentRootPath, "node_modules")),
       RequestPath="/node_modules"
   });
   // ...
   

   Note that this code allows the client to access all files in the node_modules directory. To restrict access, you can bundle and minify assets.

3. Register Static Resources

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

   _ViewImports.cshtml

   @using DevExpress.AspNetCore
   

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

   Index.cshtml

   <link href="~/node_modules/devextreme-dist/css/dx.light.css" rel="stylesheet" />
   <link href="~/node_modules/devexpress-richedit/dist/dx.richedit.css" rel="stylesheet" />
   
   <script src="~/node_modules/jszip/dist/jszip.min.js"></script>
   <script src="~/node_modules/devextreme-dist/js/dx.all.js"></script>
   
   @* Uncomment the script below if you localize the Rich Text Editor*@
   @*<script src="~/node_modules/devexpress-richedit/localization/dx-rich.de.js"></script>*@
   
   @* Uncomment the script below if you export a document to PDF on the client side or enable 
   client PDF printing mode *@
   @*<script src="~/node_modules/devexpress-richedit/dist/pdfkit.js"></script>*@
   
   <script src="~/node_modules/devexpress-richedit/dist/dx.richedit.js"></script>
   

4. Add Control to a Project

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

Index.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")
)

Controller

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. Disable the AntiForgeryToken option for the application or page that displays the Rich Text Editor. To disable this option for the entire application, add the following code to the Program.cs file:

   Program.cs

   builder.Services.AddMvc().AddRazorPagesOptions(o => {
       o.Conventions.ConfigureFilter(new Microsoft.AspNetCore.Mvc.IgnoreAntiforgeryTokenAttribute());
   });
   

   The example below demonstrates how to disable AntiForgeryToken for the Index.cshtml page:

   Index.cshtml.cs

   [IgnoreAntiforgeryToken]
   public class IndexModel : PageModel {
       public void OnPost() {
       }
   }    
   

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

   Index.cshtml.cs

   public void  OnPostExport(string base64, string fileName, DevExpress.AspNetCore.RichEdit.DocumentFormat format) {
       byte[] fileContents = System.Convert.FromBase64String(base64);  
   }
   

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

   Index.cshtml

   @(Html.DevExpress().RichEdit("richEdit")
       .ExportUrl("Index?handler=export")
       // ...
   )