Getting Started with ASP.NET Core Rich Text Editor (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 the Rich Text Editor control'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 restrict accessible files, bundle and minify assets (for example, by Gulp).

Add the Rich Text Editor Control

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

  1. In the _ViewImports.cshtml file, import the DevExpress.AspNetCore namespace all the views in the project should use. You can also use the Rich Text Editor to add this namespace.
@using DevExpress.AspNetCore
  1. Create a new view or open an existing view (for example, the Index.cshtml file), and register the required resources in a header section as shown below:
<!DOCTYPE html>
<html>
    <head>
        ...

        <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>

    </head>
    <body>
    ...
    </body>

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