Home/Cloud Services/Examples

Creating an editor bundle in Node.js

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

# 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
webpack
webpack-cli
postcss-loader
raw-loader
style-loader

# Example

The following example only acts as a template for how to prepare an editor build and bundler configuration.

# Editor build configuration

This 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 Advanced setup documentation of CKEditor 5 builds to adjust creating the bundle process to your requirements.

// ckeditorcs.js

// 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

This file presents an example of the bundler configuration. Here webpack is used as the bundler.

// webpack.config.js

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: 'postcss-loader',
                        options: styles.getPostCssConfig( {
                            themeImporter: {
                                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                            },
                            minify: true
                        } )
                    }
                ]
            }
        ]
    },
    performance: { hints: false }
};

# Usage

Run:

webpack --mode production