Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 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

Add RichEdit to an Electron Application

  • 3 minutes to read

This topic describes how to add the client-side RichEdit control to an Electron application.

#Prerequisites

#Requirements

  • To use the RichEdit control in an Electron application, you need to have a Universal, DXperience, or ASP.NET subscription.
  • Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).

#How to Create an Electron Application with RichEdit

#Install a RichEdit and Electron Packages

The devexpress-richedit npm package references devextreme-dist as peerDependencies. The peerDependencies packages should be installed manually. This allows developers to control a version of the peerDependencies packages and guarantees that the package is installed once.

Install a RichEdit package with required peerDependencies:

  1. If the package.json file does not exist, create an npm configuration file as follows: npm init -y

  2. Install a RichEdit package with required peerDependencies:

    console
    npm i devextreme-dist devexpress-richedit --save
    

Install prebuilt Electron binaries as a development dependency:

console
npm i electron --save-dev

You can find all the libraries in the node_modules folder after the installation is completed.

#Modify the package.json File

Modify the package.json file as follows:

  • Set the main field to the "main.js" value.
  • Add electron scripts to the scripts dictionary.
...
"main": "main.js",
"scripts": {
    "start": "electron ."
},
...

#Create the Main Page

Create the index.html file and populate it with the following content:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ElectronRichEditApp</title>
    <meta http-equiv="Content-Security-Policy" content="img-src * 'self' data: https:; default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />

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

    <script src="./node_modules/jszip/dist/jszip.min.js"></script>
    <script src="./node_modules/devextreme-dist/js/dx.all.debug.js"> </script>
    <script src="./node_modules/devexpress-richedit/dist/pdfkit.min.js"></script>
    <script src="./node_modules/devexpress-richedit/dist/dx.richedit.js"></script>
</head>
<body>
    <div id="rich-container"></div>
</body>
</html>

#Create the Main Script

Create the main.js file and populate it with the following content:

const fs = require('fs');
const path = require('path');
const {app, BrowserWindow} = require('electron');
const { ipcMain } = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });
  mainWindow.webContents.openDevTools();
  mainWindow.loadFile('index.html');
  mainWindow.maximize();
}
app.on('ready', createWindow);
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin')
    app.quit();
});

app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) 
    createWindow();
});

ipcMain.on('richedit-get-document', (event, documentName) => {
  const filePath = path.join(app.getAppPath(), 'documents', documentName);
  fs.readFile(filePath, (err, data) => {
    if(!err) {
      const base64 = Buffer.from(data).toString('base64');
      event.reply('richedit-get-document-reply', base64, documentName);
    }
    else
      event.reply('richedit-get-document-reply', null, documentName);
  });
});

ipcMain.on('richedit-save-document', (event, base64, documentName) => {
  const filePath = path.join(app.getAppPath(), 'documents', documentName);
  if(!fs.existsSync('documents'))
    fs.mkdirSync('documents');
  fs.writeFile(filePath, base64, { encoding: "base64" }, (err, data) => {
    if(err)
      console.log(err);
  });
});

#Create the Preload Script

Create the preload.js file and populate it with the following content:

const richEdit = require('devexpress-richedit');
const { ipcRenderer } = require('electron');

window.addEventListener('DOMContentLoaded', () => {
  initRichEdit();
});

function initRichEdit() {
  const options = richEdit.createOptions();
  options.events.saving = (s, e) => {
    ipcRenderer.send('richedit-save-document', e.base64, e.fileName + richEdit.Utils.documentFormatToExtension(e.format));
    e.handled = true;
  };
  const rich = richEdit.create(document.querySelector('#rich-container'), options);

  ipcRenderer.on('richedit-get-document-reply', (event, base64DocumentContent, fileName) => {
    const pathInfo = richEdit.Utils.parseFilePath(fileName)
    if(base64DocumentContent !== null)
      rich.openDocument(base64DocumentContent, pathInfo.nameWithoutExtension, pathInfo.documentFormat);
    else {
      rich.documentName = pathInfo.nameWithoutExtension;
      rich.documentFormat = pathInfo.documentFormat;
    }
  });
  ipcRenderer.send('richedit-get-document', 'test.docx');
}

#Launch the Application

Execute the npm start command to launch the application.