RichEdit Bundle

Apr 02, 2025
4 minutes to read

Resources

The RichEdit requires the following script and CSS resources.

Resource file	Description
jszip.js	A library for creating, reading and editing .zip files.
dx.all.js	A library that contains common DevExtreme resources, including scripts required for RichEdit.
dx.richedit.js	A library that contains RichEdit scripts.
dx.{theme}.css
e.g., dx.light.css	Contains theme styles for common DevExtreme elements.
RichEdit requires a theme CSS file.
dx.richedit.css	Contains styles for RichEdit elements.
pdfkit.js	Optional. A PDF document generation library.
Register this script if you export a document to PDF on the client side (exportToPdf) or enable client PDF printing mode.
dx-rich.{lang}.js
e.g., dx-rich.de.js	Optional. Localization resources.
Register localization scripts if you localize RichEdit.

The code sample below demonstrates how to register these resources in your application.

html

<script src="~/node_modules/devexpress-richedit/dist/pdfkit.js"></script> @* Optional *@

<script src="~/node_modules/jszip/dist/jszip.min.js"></script> @* Required *@
<script src="~/node_modules/devextreme-dist/js/dx.all.js"></script> @* Required *@
<script src="~/node_modules/devexpress-richedit/dist/dx.richedit.js"></script> @* Required *@

<link href="~/node_modules/devextreme-dist/css/dx.light.css" rel="stylesheet" /> @* Required *@
<link href="~/node_modules/devexpress-richedit/dist/dx.richedit.css" rel="stylesheet" /> @* Required *@

@* Optional. If you localize the control, you should register localization resources *@
@* <script src="~/node_modules/devexpress-richedit/localization/dx-rich.de.js"></script> *@

Create a RichEdit Bundle

You can compile the required resources into a package bundle. It eliminates unnecessary DevExtreme scripts to decrease total resource size.

Run the following commands within the project’s folder:
Register the resources in the web page’s header section instead of the required resources.

Note

If you move the dx.richedit.css file, it should be moved together with the icons folder.

Create a Custom RichEdit Bundle

Modify the node_modules/devexpress-richedit/bin/webpack.config.js file to customize bundle content.
Follow the steps in the previous section.

Automate Bundle Creating with Gulp

You can create a gulp task to update the RichEdit bundle automatically. This section describes how to create the build-rich task that performs the following actions:

Bundles the RichEdit required resources and copies the bundle to the specified script directory.
Copies the pdfkit.min.js file to the specified script directory.
Copies the dx.richedit.css file and icons folder to the specified CSS directory.

Once added, the task automatically updates RichEdit resources every time the project is opened.

Follow the steps below to create the build-rich task.

Install the gulp package within the project’s folder:
Create the gulpfile.js file.
Execute the build-rich task using the Task Runner Explorer in Visual Studio:
Register the resources in the web page’s header section.