Getting Started with the Rich Text Editor for ASP.NET Core (CTP)

This tutorial describes how to add the ASP.NET Core Rich Edit control to an ASP.NET Core application.

Install required packages

Perform the following steps to install a Rich Text Editor's NuGet package:

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

    Solution Explorer

  2. Select DevExpress 18.2 Local in the Package source drop-down list and go to the Browse page. Enable the Include prerelease checkbox, find the DevExpress.AspNetCore.RichEdit package and install it.

    Nuget

  3. Right-click the application name in the Solution Explorer and select Add | Add New Item. In the invoked Add New Item dialog, select the Installed | Visual C# | ASP.NET Core | Web category and the npm Configuration File item template. Click Add.

    Nuget

    This adds the package.json file to the project. Open this file and add the following dependencies:

    {
        "version": "1.0.0",
        "name": "asp.net",
        "private": true,
        "dependencies": {
            "devexpress-richedit": "~18.2.3"
        }
    }
    
  4. Right-click the package.json file and select Restore Packages. This adds the node_modules folder to the application project.

  5. Add the following code to the Startup.cs file to configure the application so that it can serve the node_modules folder's files:

        using Microsoft.Extensions.FileProviders;
        using System.IO;
        //...
    
        public class Startup {
        //...
            public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
                // ...
                app.UseStaticFiles();
                // ...
                app.UseStaticFiles(new StaticFileOptions {
                    FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "node_modules")),
                    RequestPath = "/node_modules"
                });         
            }
        }
    

    Note that the code above makes all the files in the node_modules folder accessible from the client. To make only required files accessible, use bundling and minification by the means of Gulp, as an example.

Add the Rich Text Editor Control

Do the following to integrate the Rich Text Editor into an ASP.NET Core project:

  1. In the _ViewImports.cshtml file, import the DevExpress.AspNetCore namespace to be used by all views in the project. Alternatively, you can add this namespace to the views with Rich Text Editor.
@using DevExpress.AspNetCore
  1. Create a new view or open an existing one (for example, the Index.cshtml file), and register the required resources by adding the following scripts to a head section:
<script src="~/node_modules/jszip/dist/jszip.min.js" type="text/javascript"></script>

<link href="~/node_modules/devextreme/dist/css/dx.common.css" rel="stylesheet" />
<link href="~/node_modules/devextreme/dist/css/dx.light.css" rel="stylesheet" />
<script src="~/node_modules/devextreme/dist/js/dx.all.js"> </script>

<link href="~/node_modules/devexpress-richedit/dist/dx.richedit.css" rel="stylesheet" />
<script src="~/node_modules/devexpress-richedit/dist/dx.richedit.js"> </script>
  1. Use the RichEdit in this view to display the Rich Text Editor control on a web page:
@(Html.DevExpress().RichEdit("richEdit")

You can specify the control's server-side settings as demonstrated below:

@(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");
            });
        })
    )
    .Bookmark(b => b
        .Visibility(Visibility.Visible)
        .Color(System.Drawing.Color.Blue)
    )
    .Ribbon(ribbon => ribbon
        .ActiveTabIndex(0)
    )
    .Open("Documents/Example.docx")
)