Skip to main content

DevExpress v25.1 Update — Your Feedback Matters

Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

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

Web Report Designer - Rich Text Editor

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.

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

Template Gallery Wizard - Enable Rich Text Editor Option

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

    {
        "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:

    ...
    {
        "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
    }
    ...
    
See Also