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
- Make sure you have Node.js and npm installed on your machine.
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:
If the package.json file does not exist, create an npm configuration file as follows:
npm init -yInstall a RichEdit package with required peerDependencies:
npm i devextreme-dist 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.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.