Current filter:
                                You should refresh the page.
                                  • This article describes how to add the Rich Text Editor control to an ASP.NET Core application

                                1 Solution

                                Creation Date Importance Sort by
                                Install Required Packages

                                Perform the following steps to install the NuGet packages required for the Rich Text Editor control:

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

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

                                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.

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

                                { "version": "1.0.0", "name": "", "private": true, "dependencies": { "devexpress-richedit": "18.2.2-pre-beta" } }


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

                                5. Publish the node_modules folder's static files to the site. You can add the following code to the Startup.cs file and make the whole node_modules folder accessible from the client. To make only required client resources accessible, use bundling and minification by the means of Gulp, as an example.


                                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" }); } }

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

                                1. In the _ViewImports.cshtml file, import the DevExpress.AspNetCore namespace to be used by all other Views. Alternatively, you can add this namespace to the Views with Rich Text Editor.

                                @using DevExpress.AspNetCore

                                2. Create a new View or open an existing one (for example, the Index.cshtml file), and register the following required resources into a header 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>

                                3. Use the RichEdit in this View to display the Rich Text Editor control on a web page:


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