Integrating CKEditor 5 with Electron from CDN

Electron is an open-source framework that allows developers to create cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. It combines the Node.js runtime and the Chromium rendering engine, enabling a single codebase to be used for cross-platform apps that work on Windows, macOS, and Linux.

Quick start

This guide will show you how to integrate CKEditor 5 with an Electron application using the CDN. If you are new to Electron, check out their official tutorial.

Setting up an Electron project

The quickest way to set up an Electron project is to use Electron Forge’s create-electron-app command. Follow the Getting Started guide to create the application.

When executing npx create-electron-app@latest my-app in the terminal, you will be prompted to choose a bundler and a language. For the sake of this tutorial, we have chosen to use Vite and vanilla JavaScript.

When the setup is finished, you should be able to go to the app’s directory and run it by executing:

cd my-app
npm start

Integrating CKEditor 5 with Electron using CDN

Project structure

After following all the steps described so far, your app’s structure should resemble this one:

├── forge.config.js
├── index.html
├── node_modules/
├── package-lock.json
├── package.json
├── src/
│   ├── index.css
│   ├── main.js
│   ├── preload.js
│   └── renderer.js
├── vite.main.config.mjs
├── vite.preload.config.mjs
└── vite.renderer.config.mjs

Implementing the editor

Inside the src/ folder, create a new file editor.js with the following content:

const {
    ClassicEditor,
    Essentials,
    Bold,
    Italic,
    Font,
    Paragraph
} = CKEDITOR;

const { FormatPainter } = CKEDITOR_PREMIUM_FEATURES;

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        licenseKey: '<YOUR_LICENSE_KEY>',
        plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ],
        toolbar: [
            'undo', 'redo', '|', 'bold', 'italic', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
            'formatPainter'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

This code imports all the necessary CKEditor 5 plugins and initializes the editor instance with the provided configuration.

Now modify the index.html file so it looks like this:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World!</title>

    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/47.4.0/ckeditor5.css" />
    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/47.4.0/ckeditor5-premium-features.css" />

        <script src="https://cdn.ckeditor.com/ckeditor5/47.4.0/ckeditor5.umd.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5-premium-features/47.4.0/ckeditor5-premium-features.umd.js"></script>
    </head>
    <body>
        <h1>Hello Electron and CKEditor 5!</h1>
        <p>Welcome to your Electron application. Below you should see a working instance of CKEditor 5:</p>

        <div id="editor"></div>

        <script src="./src/editor.js"></script>

        <script type="module" src="/src/renderer.js"></script>
    </body>
</html>

Here we adjusted the structure to include the <div> placeholder for the editor instance. We have also added CDN links to the editor’s styles, source files, and finally the editor.js file, which is responsible for tying everything together and initializing the editor.

You can now execute npm start to run the Electron app. It should automatically open a window with an editor instance ready to be used:

Screenshot of CKEditor 5 inside Electron application.

Obtaining a premium features license key

To activate CKEditor 5 premium features, you will need a commercial license. The easiest way to get one is to sign up for the CKEditor Premium Features 14-day free trial.

You can also contact us to receive an offer tailored to your needs. To obtain an activation key, please follow the License key and activation guide.

Next steps

See how to manipulate the editor’s data in the Getting and setting data guide.
Refer to further guides in the setup section to see how to customize your editor further.
Check the features category to learn more about individual features.