All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.

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

Create an Electron Application with RichEdit

Install a RichEdit and Electron Packages

The devexpress-richedit npm package references devextreme 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:

    npm i devextreme devexpress-richedit --save
    

Install prebuilt Electron binaries as a development dependency:

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.common.css" rel="stylesheet" />
    <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.