ASP.NET Core Apps: Enable Rich Text Editor in Web Report Designer

• Dec 04, 2024
• 2 minutes to read

The XRRichText control can display text with rich formatting in your report. You can specify content directly in the control, load text from an RTF/HTML file, or bind the control to a data field.

You can activate an inline Rich Text Editor and allow users to format and edit content in the Web Report Designer:

Note

The inline Rich Text Editor does not support Right-To-Left mode. For more information on limitations, refer to the following help topic: Rich Text Editor Unsupported Features.

In Project Template Gallery

Check the Enable Rich Text Editor option when you create a new ASP.NET Core reporting application with a Web Report Designer.

In Code

Follow the steps below to enable the Rich Text Editor in the ASP.NET Core reporting project:

1. Open the package.json file. Add the devexpress-richedit dependency.

   JSON

   {
       "version": "1.0.0",
       "name": "DXWebApplication",
       "private": true,
       "dependencies": {
           "devextreme-dist": "25.1.*",
           "devexpress-richedit": "25.1.*",
           "@devexpress/analytics-core": "25.1.*",
           "devexpress-reporting": "25.1.*",
           "ace-builds": "^1.3.3"
       }
   }
   

2. Right-click the package.json file and select Restore Packages. This adds the Rich Text Editor’s resources to the node_modules folder.

3. Reference the Rich Edit resources in bundleconfig.json:

   bundleconfig.json

   ...
   {
       "outputFileName": "wwwroot/css/designer.part.bundle.css",
       "inputFiles": [
       "node_modules/devexpress-richedit/dist/dx.richedit.css",
       "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
       "node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css"     
       ],
       "minify": {
       "enabled": false,
       "adjustRelativePaths": false
       }
   },
   ...
   {
       "outputFileName": "wwwroot/js/designer.part.bundle.js",
       "inputFiles": [      
       "node_modules/jszip/dist/jszip.min.js",
       "node_modules/devexpress-richedit/dist/dx.richedit.min.js",
       "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js",
       "node_modules/devexpress-reporting/dist/js/dx-reportdesigner.min.js"
       ],
       "minify": {
       "enabled": false
       },
       "sourceMap": false
   }
   ...