Bootstrap FreeKB - CKEditor - Install CKEditor 5 using npm from source on Linux
CKEditor - Install CKEditor 5 using npm from source on Linux

Updated:   |  CKEditor articles

This assumes you have NodeJS installed on your Linux system. If not, check out my article Install NodeJS on Linux.

Let's create a directory for CKEditor.

mkdir /tmp/ckeditor

 

And move into the directory.

cd /tmp/ckeditor

 

Let's create a file named webpack.config.js with the following markup.

'use strict';

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

module.exports = {
    entry: './app.js',
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};

 

Since webpack.config.js has app.js as the name of the entry in module.examples, let's create a file named app.js with the following markup.

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic ],
        toolbar: [ 'bold', 'italic' ]
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

 

And let's create package.json with the following.

{
  "dependencies": {
    "@ckeditor/ckeditor5-basic-styles": "^42.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^40.2.3",
    "@ckeditor/ckeditor5-editor-classic": "^42.0.0",
    "@ckeditor/ckeditor5-essentials": "^42.0.0",
    "@ckeditor/ckeditor5-paragraph": "^42.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^42.0.0",
    "css-loader": "^5.2.7",
    "package.json": "^2.0.1",
    "postcss-loader": "^4.3.0",
    "raw-loader": "^4.0.2",
    "style-loader": "^2.0.0",
    "webpack": "^5.92.1",
    "webpack-cli": "^4.10.0"
  }
}

 

Let's use the npm install command to install the packages in package.json.

npm install package.json

 

The npm install command will create the package-lock.json file as well as the node_modules directory, and the node_modules directory should contain a slew of files and directories

~]$ ls -l
-rw-rw-rw-    1 john.doe admin    582 Jul  3 20:11 app.js
drwxrwxrwx+ 133 john.doe admin   4096 Jul  3 20:12 node_modules
-rw-rw-rw-    1 john.doe admin    201 Jul  3 20:12 package.json
-rw-rw-rw-    1 john.doe admin  67500 Jul  3 20:12 package-lock.json
-rw-rw-rw-    1 john.doe admin   1726 Jul  3 20:11 webpack.config.js

 

Let's use the webpack CLI to build the editor.

./node_modules/.bin/webpack --mode development

 

Since webpack.config.js has "dist" as the output directory, there should now be a directory named dist that contains 2 files, bundle.js and bundle.js.map.

]$ ls -l dist/
-rw-rw-rw- 1 john.doe admin 4844915 Jul  3 20:14 bundle.js
-rw-rw-rw- 1 john.doe admin 4531335 Jul  3 20:14 bundle.js.map

 

And let's create index.html in the same directory as app.js with the following HTML.

<div id="editor"></div>
<script src="dist/bundle.js"></script>

 

Since this was created on your Windows laptop you should now be able to pull up the index.html page in one of your web browsers and the super basic CKEditor should be displayed. Nice! Your web browsers developer tools (F12) should have Editor was initialized.




Did you find this article helpful?

If so, consider buying me a coffee over at Buy Me A Coffee



Comments


Add a Comment


Please enter f97936 in the box below so that we can be sure you are a human.