RichEdit Bundle

• Sep 09, 2024
• 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.

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

1. Run the following commands within the project’s folder:

   cd node_modules/devexpress-richedit
   npm i --save-dev
   npm run build-custom
   

   The commands create the node_modules/devexpress-richedit/dist/custom directory with the following content:

   • The unminified dx.richedit.js and minified dx.richedit.min.js files that contain RichEdit scripts, DevExtreme scripts, and JSZip library.
   • The dx.richedit.css file that contains RichEdit CSS resources, DevExtreme CSS resources, and DevExtreme theme styles.
   • The icons folder that contains RichEdit and common DevExtreme icons.

2. Register the resources in the web page’s header section instead of the required resources.

   <script src="~/node_modules/devexpress-richedit/dist/pdfkit.js"></script> @* Optional *@
   <script src="~/node_modules/devexpress-richedit/dist/custom/dx.richedit.js"></script> @* Required *@
   <link href="~/node_modules/devexpress-richedit/dist/custom/dx.richedit.css" rel="stylesheet"/> @* Required *@
   @* <script src="~/node_modules/devexpress-richedit/localization/dx-rich.de.js"></script> *@
   

Note

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

Create a Custom RichEdit Bundle

1. Modify the node_modules/devexpress-richedit/bin/webpack.config.js file to customize bundle content.

   You can uncomment a variable in the externals property to exclude the corresponding module from the bundle.

   externals: [ handleExternals([/*jsZipExternals, devextremeExternals*/]) ],
   

   Note that in this case you should register the module on the page:

   • Register the jszip.min.js library if you uncomment the jsZipExternals string.
   • Register the dx.all.js library if you uncomment the devextremeExternals string.

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

1. Install the gulp package within the project’s folder:

   • If the package.json file does not exist, create an npm configuration file as follows:

     npm init -y
     

   • Install the gulp package:

     npm i gulp
     

2. Create the gulpfile.js file.

   gulpfile.js

   /// <binding ProjectOpened='build-rich' />
   'use strict';
   const path = require('path');
   const { exec } = require('child_process');
   const { src, dest, series } = require('gulp');
   
   const richPackagePath = path.join(__dirname, 'node_modules', 'devexpress-richedit');
   const richDistFolder = path.join(richPackagePath, 'dist');
   
   //Specify the path to resources in your project.
   //The code below specifies the path to resources in a .NET Core application
   const richEditCssDest = path.join(__dirname, 'wwwroot', 'css', 'rich-edit');
   const richEditScriptsDest = path.join(__dirname, 'wwwroot', 'js', 'rich-edit');
   
   //For an MVC application use the following code
   //const richEditCssDest = path.join(__dirname, 'Content', 'rich-edit');
   //const richEditScriptsDest = path.join(__dirname, 'Scripts', 'rich-edit');
   
   function richInstallPackages() {
       return exec('npm i --save-dev', { cwd: richPackagePath });
   }
   
   function richCustomBuild() {
       return exec('npm run build-custom', { cwd: richPackagePath });
   }
   
   function richCopyCustomScripts() {
       const base = path.join(richDistFolder, 'custom');
       const source = [path.join(base, '*')];
       return src(source, { base })
           .pipe(dest(richEditScriptsDest));
   }
   
   function richCopyScripts() {
       const base = richDistFolder;
       const source = [path.join(base, 'pdfkit.js'), path.join(base, 'pdfkit.min.js')];
       return src(source, { base })
           .pipe(dest(richEditScriptsDest));
   }
   
   function richCopyCustomCss() {
       const base = path.join(richDistFolder, 'custom');
       const source = [path.join(base, 'icons/**/*'), path.join(base, 'dx.richedit.css')];
       return src(source, { base })
           .pipe(dest(richEditCssDest));
   }
   
   exports.buildRich = series(
       richInstallPackages,
       richCustomBuild,
       richCopyCustomScripts,
       richCopyScripts,
       richCopyCustomCss
   );
   

3. Execute the build-rich task using the Task Runner Explorer in Visual Studio:

   

   Alternatively, you can run a gulp task from the command line as follows:

   • Install the command line utility for gulp globally:

     npm i -g gulp-cli
     

   • Run the following command within the project’s folder:

     gulp build-rich
     

4. Register the resources in the web page’s header section.

   <script src="~/js/rich-edit/pdfkit.js"></script> @* Optional *@
   <script src="~/js/rich-edit/dx.richedit.js"></script> @* Required *@
   <link href="~/css/rich-edit/dx.richedit.css" rel="stylesheet" /> @* Required *@
   @* <script src="~/node_modules/devexpress-richedit/localization/dx-rich.de.js"></script> *@