Home/Cloud Services/Examples

Creating an editor bundle in Node.js

This article presents examples of a CKEditor 5 editor bundle in Node.js. An editor bundle is required by CKEditor Cloud Services to enable the document storage, import and export as well as connection optimization features.

This article presents ready-to-use examples. If you need a step-by-step guide or have an existing CKEditor 5 setup that needs to be adjusted to create a bundle, refer to Advanced editor bundling article.

# Example bundle

The following example presents a minimalistic editor bundle setup. It is based on 3 files - package.json, ckeditorcs.js and webpack.config.js, and is ready to use.

# Dependencies

This example uses the following dependencies:

ckeditor5
ckeditor5-premium-features
webpack
webpack-cli
mini-css-extract-plugin

With the above, the package.json file should look like the one below.

{
    "name": "ckeditorcs-bundle",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "ckeditor5": "^42.0.0",
        "ckeditor5-premium-features": "^42.0.0"
    },
    "devDependencies": {
        "webpack": "^5.91.0",
        "webpack-cli": "^4.10.0",
        "mini-css-extract-plugin": "^2.9.0"
    }
}

# Editor build configuration

The ckeditorcs.js file presents an example of an editor build configuration. It is used by the bundler as an entry file.

Remember to adapt the configurations below to your needs because this example is kept to a minimum. Refer to the Configuring features documentation of CKEditor 5 to adjust the editor to your requirements.

import {
    // The editor base creator to use.
    ClassicEditor,
    // All plugins that you would like to use in your editor.
    Essentials,
    Paragraph,
    Bold,
    Italic
} from 'ckeditor5';

import {
    // All premium plugins that you would like to use in your editor.
    RealTimeCollaborativeEditing
} from 'ckeditor5-premium-features';

class CKEditorCS extends ClassicEditor {}

// Load all plugins you would like to use in your editor this way.
// This is the only way to load plugins into the editor which will then be used in CKEditor Cloud Services.
CKEditorCS.builtinPlugins = [
    Essentials,
    Paragraph,
    Bold,
    Italic,
    RealTimeCollaborativeEditing
];

// Export your editor.
export default CKEditorCS;

# Bundler configuration

The webpack.config.js file presents the bundler configuration. Here webpack is used as the bundler.

const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

module.exports = {
    entry: './ckeditorcs.js', // Your editor build configuration.
    output: {
        filename: 'editor.bundle.js', // Content of this file is required to upload to CKEditor Cloud Services.
        library: 'CKEditorCS', // It is required to expose you editor class under the "CKEditorCS" name!

        libraryTarget: 'umd',
        libraryExport: 'default',
        clean: true
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    performance: { hints: false }
};

# Generating the bundle

Run the following commands inside the folder with these files:

npm install
npx webpack --mode production

This command will result in the generation of the ./dist/editor.bundle.js file. This is the bundle file which then should be uploaded to CKEditor Cloud Services server.

# Example bundle (legacy configuration)

This section relates to bundling editor from legacy configuration. Legacy configuration is the one using editor presets, DLLs, or @ckeditor/ckeditor5-* imports.

Refer to the above Example bundle section for and up-to-date example.

The following example presents a minimalistic editor bundle setup. It is based on 3 files - package.json, ckeditorcs.js and webpack.config.js, and is ready to use.

# Dependencies

This example uses the following dependencies:

@ckeditor/ckeditor5-editor-classic
@ckeditor/ckeditor5-basic-styles
@ckeditor/ckeditor5-essentials
@ckeditor/ckeditor5-paragraph
@ckeditor/ckeditor5-real-time-collaboration
@ckeditor/ckeditor5-dev-utils
@ckeditor/ckeditor5-theme-lark
css-loader
postcss-loader
raw-loader
style-loader
webpack
webpack-cli

With the above, the package.json file should look like the one below:

A list of packages and their versions will vary, depending on the editor preset/build and the time when it was created.

{
    "name": "ckeditorcs-bundle",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "@ckeditor/ckeditor5-editor-classic": "41.4.2",
        "@ckeditor/ckeditor5-basic-styles": "41.4.2",
        "@ckeditor/ckeditor5-essentials": "41.4.2",
        "@ckeditor/ckeditor5-paragraph": "41.4.2",
        "@ckeditor/ckeditor5-real-time-collaboration": "41.4.2"
    },
    "devDependencies": {
        "@ckeditor/ckeditor5-dev-utils": "^40.2.2",
        "@ckeditor/ckeditor5-theme-lark": "41.4.2",
        "css-loader": "^5.2.7",
        "postcss-loader": "^4.3.0",
        "raw-loader": "^4.0.2",
        "style-loader": "^2.0.0",
        "webpack": "^5.91.0",
        "webpack-cli": "^4.10.0"
    }
}

# Editor build configuration

The ckeditorcs.js file presents an example of an editor build configuration. It is used by the bundler as an entry file.

Remember to adapt the configurations below to your needs because the examples are kept to a minimum. Refer to the CKEditor 5 Getting started guide.

// The editor base creator to use.
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

// All plugins that you would like to use in your editor.
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import RealTimeCollaborativeEditing from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativeediting';

class CKEditorCS extends ClassicEditor {}

// Load all plugins you would like to use in your editor this way.
// This is the only way to load plugins into the editor which will then be used in CKEditor Cloud Services.
CKEditorCS.builtinPlugins = [
    Essentials,
    Paragraph,
    Bold,
    Italic,
    RealTimeCollaborativeEditing
];

// Export your editor.
export default CKEditorCS;

# Bundler configuration

The webpack.config.js file presents an example of the bundler configuration. Here webpack is used as the bundler.

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    entry: './ckeditorcs.js', // Your editor build configuration.
    output: {
        filename: 'editor.bundle.js', // Content of this file is required to upload to CKEditor Cloud Services.
        library: 'CKEditorCS', // It is required to expose you editor class under the "CKEditorCS" name!

        libraryTarget: 'umd',
        libraryExport: 'default'
    },
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: [ 'raw-loader' ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag'
                        }
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },
    performance: { hints: false }
};

# Generating the bundle

Run the following commands inside the CKEditor 5 package folder:

npm install
npx webpack --mode production

This command will result in the generation of the ./dist/editor.bundle.js file. This is the bundle file which then should be uploaded to CKEditor Cloud Services server.