Building CKEditor 5 From Source  2 

Updated Sep 2020. This CKEditor 5 tutorial is a step-by-step guide how to build a custom CKEditor 5 - allowing maximum flexibility in your CKEditor 5.

Then you finish this CKEditor 5 tutorial, you will be able to build CKEditor 5 from source and configure it to your own exact needs.

Index : 

• Introduction
• Prepare tools & development environment
  • Install the pre-requisites
  • Create the folder & file structure
• Downloading the CKEditor 5 NPM packages
  • Writing the package.json file
  • Download the packages
• Coding the CKEditor 5 module - (app.js)
• Bundling the CKEditor 5 module - (webpack.config.js)
  • Writing the webpack.config.js file
  • Executing webpack - finally build the custom ckeditor 5
• Writing the CKEditor 5 test file - (index.html)

Appendixes :

• Appendix : NPM Commands
• Appendix : Max-Loaded CKEditor 5 - as many plugins as possible
• Appendix : Common Errors & Solutions

Introduction

CKEditor 5 is a modular framework for building Rich Text Editors and we can either download one of the pre-build CK5 editors or we can build our own version based on our particular needs. Building our own CK5 editor is a LOT more flexible as well as allowing custom functionality not otherwise avaliable.

The CKEditor team encourages us to build our own custom CK5 editor versions and have made it easy to do so - here I will build a simple custom editor without any extra just to get the basic CKEditor building covered, it will look like this :

There are basically 2 ways to build a CKEditor 5 from source :

• Finished build : most easy for simple usage as a webpage just need to reference the finished build object and specify where to put the editor and it will work, however any changes to configuration will require a rebuild.
• Intermediary build : allows adhoc changes to configuration as well as differently configured editors on the same page all using the same intermediary CKEditor 5 object, this is more efficient and a joy to work with - this tutorial will build an intermediary ckeditor 5 object.

Prepare Tools & Development Environment

To build a CKEditor 5 from source, a few tools are necessary :

• Node : necessary for NPM & Webpack to run.
• NPM : we use NPM to copy CKEditor 5 packages from the npm repository @npmjs.com to our dev machine.
• Webpack : we use Webpack to bundle all our CKEditor 5 packages and our Javascript files into one Javascript editor object.

Install the pre-requisites

1.  Open a command prompt
2.  Test your Node.js & NPM version :
   1. shell> node -v : test if you have Node.js installed.
   2. shell> npm -v : test if you have NPM installed.
3. If Node & NPM are NOT installed OR if you are not sure you have the newest version :
   1. Download the latest Node.js and install it ((NPM will be automatically installed as part of installing Node.js)
   2. Test your Node.js & NPM versions again, this time you should have them and the latest version.
4.  Test your Webpack version :
   1. shell> webpack -v :
5. If Webpack is NOT installed OR if you are not sure you have the newest version, then install Webpack : (Webpack can be installed either globally or locally (locally means a specific webpack for a specific project within the project folder). The local installation is recommended, however in this project I use a global installation)
   1. shell> npm install webpack -g : install webpack globally.
6.  Test your Webpack installation again - you should now have Node, NPM & Webpack installed.

Create the folder & file structure

Below is the folder structure in which we will create the custom CKEditor 5 build, starting with a build root folder called CustomCKEditor. All folders & files in bold you must create yourself. All folders & files NOT in bold will be automatically created later.

• CustomCKEditor
  • dist : folder is created then running the webpack command and will hold the final custom editor code (to be loaded in the browser).
    • ckeditor.js  : holding the editor javascript object.
    • translations  : folder holding languages files.
      • da.js  : danish.
      • ja.js :  : japanese.
      • .. many more.
  • node-modules : folder is created then running the npm install command will hold all direct & indirect package dependencies.
    • .. immense amount of NPM package folders.
  • app.js  : javascript file in which we build the editor.
  • index.html : html file to test our editor and in our case also where we configure the editor.
  • package.json : json file to tell NPM what npm packages to copy from the npm repository (package.json is typically also used to tell NPM how to create a package, however  we will not use it for that)
  • package-lock.json : json file automatically created by the npm install command to take a snapshot of package dependency.
  • webpack.config.js : javascript file to configure Webpack, eg. what packages to use for image handling, what packages to use for css handling, what to call the editor javascript object and so on.

Ok, let's get the folder structure created :

1. Open a command prompt
2.  shell> cd c:\ : Navigate to an appropriate location, here C:\
3.  Create the build root folder CustomCKEditor, navigate and take a look :
   1. shell> mkdir CustomCKEditor : create the build root folder CustomCKEditor.
   2. shell> cd CustomEditor : navigate to the newly created CustomEditor folder.
   3. shell> dir : take a look - the folder is empty.
4.  Inside the build root folder create the 4 files that needs to be created manually : app.js, index.html, package.json & webpack.config.js
   1. shell> type nul > app.js :  : will hold the javascript code for assembling the CKEditor 5 packages.
   2. shell> type nul > index.html : will hold the html & javascript code for configuring the CKEditor 5 object.
   3. shell> type nul > package.json : will hold the json code configuring NPM (in this tutorial mainly for specifying what CKEditor 5 packages to download form the NPM repository)
   4. shell> type nul > webpack.config.js : will hold the javascript to configure Webpack, eg. name of CKEditor 5 object to create and what loaders to use for css & image resources.
5.  shell> dir : take a look of what you have created - you should now have 4 empty files.

Downloading the CKEditor 5 NPM packages

CKEditor 5 packages are available for download from the NPM repository @npmjs.com, however because of dependencies between packages it is not viable to manually download the packages, instead we need a package manager, NPM, to download the packages for us.

The NPM tool is used for both creating, uploading & downloading packages and needs to be configured using a file called package.json and even while this tutorial is only using NPM for downloading packages, we will still add a few properties to package.json related to creating a package, eg. name & version, to make it a more complete package.json file.

Writing the package.json file

For our purpose (downloading packages) the package.json file consist of 2 main sections :

• dependencies : packages that our custom CKEditor 5 module will depend on.
• devDependencies : packages used by Webpack to create the editor module but that after creation is not needed any more.

1. Open any text editor (I like to use Visual Studio, but you can use eg. Notepad) and load the empty package.json file we created above into the text editor.
2. Insert the following code into package.json : (note that then you read this, the version numbers will have increased for most if not all packages)

   • {
      "name": "customckeditor",
      "version": "1.0.0",
      "description": "Custom CKEditor 5 for test.",
      "author": "Rasmus Rummel",
      "license": "GPL-2.0-or-later",
      "homepage": "https://topiqs.online/1119",
       "dependencies": {
        "@ckeditor/ckeditor5-editor-classic": "^22.0.0",
        "@ckeditor/ckeditor5-essentials": "^22.0.0",
        "@ckeditor/ckeditor5-basic-styles": "^22.0.0",
        "@ckeditor/ckeditor5-heading": "^22.0.0",
        "@ckeditor/ckeditor5-block-quote": "^22.0.0",
        "@ckeditor/ckeditor5-list": "^22.0.0",
        "@ckeditor/ckeditor5-link": "^22.0.0",
        "@ckeditor/ckeditor5-theme-lark": "^22.0.0"
      },
      "devDependencies": {
        "@ckeditor/ckeditor5-dev-utils": "^22.0.0",
        "@ckeditor/ckeditor5-dev-webpack-plugin": "22.0.0",
        "postcss-loader": "3.0.0",
        "raw-loader": "4.0.1",
        "style-loader": "1.2.1",
        "webpack": "^4.44.2",
        "webpack-cli": "^3.3.12"
      }
     }

3. Save package.json.

Before continuing let us just short note what each package is for :

• dependencies : (objects inside these packages will make up our editor object)
  • @ckeditor/ckeditor5-editor-classic : contains the ClassicEditorBase object which will form the base of our editor object (official).
  • @ckeditor/ckeditor5-essentials : enables clipboard, Enter, ShiftEnter, typing & undo (official).
  • @ckeditor/ckeditor5-basic-styles : provides bold, italic, underline and other basic styles (official).
  • @ckeditor/ckeditor5-heading : provides headings and paragraph (official).
  • @ckeditor/ckeditor5-block-quote : provides the blockquote functionality (official).
  • @ckeditor/ckeditor5-list : provides ordered and unordered bulleted lists (official).
  • @ckeditor/ckeditor5-link : provides link editing (official).
  • @ckeditor/ckeditor5-theme-lark : contains a theme (called lark) for the CKEditor5 (official).
• devDependencies : (objects inside these packages will be used by Webpack while building the editor object)
  • @ckeditor/ckeditor5-dev-webpack-plugin : used for localization (official).
  • @ckeditor/ckeditor5-dev-utils : contains a loader called styles that we will let Webpack use to apply the lark theme to the CKEditor 5.
  • postcss-loader : contains a css loader that we will let Webpack use together with styles from ckeditor5-dev-utils to apply the lark theme (official).
  • raw-loader : we use it to load .svg-files (official).
  • style-loader : we use it to load .css-files (official).
  • webpack : is already installed above, however if you installed Webpack locally, I include it here so that it is available (official).
  • webpack-cli : the commandline interface for Webpack exists in it's own package separated from the Webpack main functionality (official).

Note that the official CKEditor 5 build guides includes 1 more dev package :

• uglifyjs-webpack-plugin : used for minification and official CKEditor 5 documentation says that minification will be automatically applied by Webpack in --mode=production, however I have tested that the file size is unaffected whether uglifyjs-webpack-plugin is available and furthermore explicit use of the uglifyjs-webpack-plugin results in an error that seems to result from uglifyjs-webpack-plugin not being able to parse ES6 (though the official CKEditor 5 documentation explicitly states that it can indeed parse ES6). My tentative conclusion is that uglifyjs-webpack-plugin is NOT relevant (except if we transpile all CKEditor 5 NPM packages to ES5) (official).

Download the packages

With the package.json file finished, we can now execute NPM to download the packages specified in package.json (NPM will look for a package.json file in the folder from where the NPM tool is executed).

1. Open a command prompt.
2.  shell> cd c:\CustomCKEditor : navigate to the build root folder CustomCKEditor.
3.  shell> npm install : download the packages specified in the package.json file.
4.  shell> dir : take a look - the NPM tool have created the following :
   1. A node_modules folder that contains all the packages we specified as well as a huge amount of dependencies (packages that our CKEditor5 packages depends on).
   2. A package-lock.json file that contains a description of the dependencies for this particulary download.

Coding the CKEditor 5 module - (app.js)

Coding the custom CKEditor 5 object is a lot easier than it sounds - you mostly just specify which packages to use (all the CKEditor 5 code already exists within the NPM packages we downloaded above).

1. Open any text editor and load the empty app.js file we created above into the text editor.
2. Insert the following code into app.js :
   

   import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
   import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
   import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
   import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
   import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
   import Heading from '@ckeditor/ckeditor5-heading/src/heading';
   import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
   import List from '@ckeditor/ckeditor5-list/src/list';
   import Link from '@ckeditor/ckeditor5-link/src/link';
    
   export default class MyCustomEditor extends ClassicEditorBase { } //the classname is not important since we use export default
    
   MyCustomEditor.builtinPlugins = [
      Essentials, //necessary, eg. Enter will not work within this plugin
      Bold,
      Italic,
      Underline,
      Heading,
      BlockQuote,
      List,
      Link
   ];

3. Save app.js

Notice that the Bold, Italic and Underline plugins all come from the same package : @ckeditor/ckeditor5-basic-styles

Bundling the CKEditor 5 module - (webpack.config.js)

Webpack is the tool that will bundle the app.js file with all the NPM packages directly or indirectly referenced in app.js creating the CKEditor 5 build.

However, we have to tell Webpack that it has to take the app.js file as the entry point of the bundling, how to process different kind of resources, eg. what loader to use for css and icons and what to call the output file (here ckeditor.js) and what module technology to use etc - we do that in a file called webpack.config.js (Webpack will automatically search for webpack.config.js in the same folder from which Webpack is executed).

Writing the webpack.config.js file

1. Open any text editor and load the empty webpack.config.js file we created above into the text editor.
2. Insert the following code into webpack.config.js :
   

   'use strict'; // ES6 modules are expected to always use strict.
    
   const path = require('path'); // We use this object below to calculate path for output (is often also used for entry).
   const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin'); // for localization.
   const { styles } = require('@ckeditor/ckeditor5-dev-utils'); // We use this object below to add a CKEditor 5 theme (the ckeditor5-theme-lark).
    
   module.exports = {
      entry: './app.js', // starting point(s) for building the bundle.
    
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'ckeditor.js', // The name of the file that hold the editor code (default is bundle.js, but here we call it ckeditor.js).
          library: 'CustomEditor', // The name of the editor object.
          libraryTarget: 'var', // Configure how the library will be exposed.
          libraryExport: 'default' // Configure which module or modules will be exposed via the libraryTarget.
      },
    
      plugins: [
          new CKEditorWebpackPlugin({
              language: 'en', // default language.
              additionalLanguages: 'all' // this will write ALL the language files out.
          })
      ],
    
      module: {
          rules: [
              {
                  test: /\.svg$/,
                  use: ['raw-loader']
              },
              {
                  test: /\.css$/,
    
                  use: [
                      {
                        loader: 'style-loader',
                        options: {
                           injectType: 'singletonStyleTag',
                           attributes: {
                              'data-cke': true
                           }
                        }
                      },
                      {
                          loader: 'postcss-loader',
                          options: styles.getPostCssConfig({
                              themeImporter: {
                                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                              },
                              minify: true
                          })
                      }
                  ]
              }
          ]
      },
    
      mode: 'production', // if the mode property is not set, Webpack will warn us and set it to production.
      performance: { hints: false } // don't warn us that the bundle is bigger than 200kb.
   };

3. Save webpack.config.js

Note that the official CKEditor 5 build from source webpack.config.js does NOT contain the path statement and will result in a "path is not defined" error then executing webpack.

Executing webpack

With the CKEditor 5 packages downloaded, the app.js editor code created and the Webpack configuration file done, we are ready to execute Webpack to create our custom build CKEditor 5 :

1. Open a command prompt.
2.  shell> cd c:\CustomCKEditor : navigate to the build root folder CustomCKEditor.
3.  shell> webpack : execute webpack.
4.  shell> dir : look around - a new folder have been created called dist (we now have the final folder & file structure listed at the beginning of this tutorial).
5.  shell> dir dist : look inside the dist folder - Webpack have created the following :
   • a new file have been created called ckeditor.js, this is our custom CKEditor 5 build.
   • a new folder have been created called translations, this folder holds all the language files like en-au.js (australian), da.js (danish), jp.js (japanese), de.js (german) etc.

Writing the CKEditor 5 test file - (index.html)

With the editor module created (in the dist\ckeditor.js file) it is time to test it and finally see a real CKEditor 5 in the browser.

1. Open any text editor and load the empty index.html file we created above into the text editor.
2. Insert the following code (into index.html) :
   

   <!DOCTYPE html>
   <html>
   <head>
      <meta charset="utf-8" />
      <title></title>
      <script src="dist/ckeditor.js"></script>
      <script src="dist/translations/da.js"></script>
   </head>
   <body>
      <div id="editor">
          <p>Editor content goes here.</p>
      </div>
      <script>
          CustomEditor.create(document.querySelector('#editor'), {
              toolbar: [
                  'heading', // Heading plugin
                  '|', // separator
                  'bold', // Bold plugin
                  'italic', // Italic plugin
                  'underline', // Underline plugin
                  '|',
                  'numberedlist', // List plugin
                  'bulletedlist', // List plugin
                  '|',
                  'blockQuote', // BlockQuote plugin
                  'link', // Link plugin
                  '|',
                  'undo', // Essentials plugin
                  'redo' // Essentials plugin
              ],
              language: 'da'
          })
          .then(editor => {
              window.editor = editor;
          })
          .catch(err => {
              console.error(err.stack);
          });
      </script>
   </body>
   </html>

3. Save index.html.
4.  Load the index.html file in a browser - you should now see you own custom CKEditor 5 !

Appendix : NPM Commands

Just a few handy NPM commands then building a CKEditor 5 :

• shell> npm -v : shows the installed NPM version.
• shell> npm install npm@latest -g : update NPM to latest version.
• shell> npm install webpack -g : install webpack globally (globally meaning that the webpack command can be used from any folder location).
• shell> npm uninstall webpack -g : uninstall webpack globally (webpack may still be available from local folders where webpack exists in the node_modules)
• shell> npm install : downloads all packages specified in package.json (in the same folder from where npm install is executed).
• shell> npm show webpack : shows the latest version of the webpack package available from the node package repository.

Appendix : Max-Loaded CKEditor 5

While there exists no such thing as a 'full' CK5 editor, it DOES give mening to make a CK5 editor loaded with as much functionality as possible if for nothing else then for having a list of available plugins and how to reference them (note that here I don't include commercial modules).

To max-load a CKEditor 5, we need to change package.json, app.js & index.html (only the webpack.config.js file is unchanged).

Max-Loaded package.json

{
 "name": "customckeditor",
 "version": "1.0.0",
 "description": "Custom CKEditor 5 for test.",
 "author": "Rasmus Rummel",
 "license": "GPL-2.0-or-later",
 "homepage": "https://topiqs.online/1119",
 "dependencies": {
   "@ckeditor/ckeditor5-editor-classic": "12.1.3",
   "@ckeditor/ckeditor5-essentials": "11.0.4",
   "@ckeditor/ckeditor5-basic-styles": "11.1.3",
   "@ckeditor/ckeditor5-heading": "11.0.4",
   "@ckeditor/ckeditor5-block-quote": "11.1.2",
   "@ckeditor/ckeditor5-list": "12.0.4",
   "@ckeditor/ckeditor5-link": "11.1.1",
   "@ckeditor/ckeditor5-autoformat": "11.0.4",
   "@ckeditor/ckeditor5-alignment": "11.1.3",
   "@ckeditor/ckeditor5-font": "11.2.1",
   "@ckeditor/ckeditor5-highlight": "11.0.4",
   "@ckeditor/ckeditor5-table": "13.0.2",
   "@ckeditor/ckeditor5-image": "13.1.2",
   "@ckeditor/ckeditor5-media-embed": "11.1.3",
   "ckeditor5-upload-adapter": "1.0.2",
   "ckeditor5-syntaxer": "1.0.9",
   "@ckeditor/ckeditor5-paste-from-office": "11.0.4",
   "@ckeditor/ckeditor5-theme-lark": "14.1.1"
 },
 "devDependencies": {
   "@ckeditor/ckeditor5-dev-webpack-plugin": "8.0.1",
   "@ckeditor/ckeditor5-dev-utils": "12.0.1",
   "postcss-loader": "3.0.0",
   "raw-loader": "3.0.0",
   "style-loader": "0.23.1",
   "uglifyjs-webpack-plugin": "2.1.3",
   "webpack": "4.15.1",
   "webpack-cli": "3.3.5"
 }
}

devDependencies have not changed only dependencies, however even so let's short go through them all again (this color representing new dependencies) :

• dependencies : (objects inside these packages will make up our editor object)
  • @ckeditor/ckeditor5-editor-classic : contains the ClassicEditorBase object which will form the base of our editor object (official).
  • @ckeditor/ckeditor5-essentials : enables clipboard, Enter, ShiftEnter, typing & undo (official).
  • @ckeditor/ckeditor5-basic-styles : provides bold, italic, underline and other basic styles (official).
  • @ckeditor/ckeditor5-heading : provides headings and paragraph (official).
  • @ckeditor/ckeditor5-block-quote : provides the blockquote functionality (official).
  • @ckeditor/ckeditor5-list : provides ordered and unordered bulleted lists (official).
  • @ckeditor/ckeditor5-link : provides link editing (official).
  • @ckeditor/ckeditor5-autoformat : enables shortcut formatting eg. *+space creates a bulleted list (official).
  • @ckeditor/ckeditor5-alignment : provides text alignment (official).
  • @ckeditor/ckeditor5-font : provides FontFamily, FontSize, FontColor & FontBackgroundColor (official).
  • @ckeditor/ckeditor5-highlight : provides a text marking tool (official).
  • @ckeditor/ckeditor5-paste-from-office : enables the ckeditor 5 to retain basic styling then copying from Microsoft Word (official).
  • @ckeditor/ckeditor5-table : provides table creation & table editing functionality (official).
  • @ckeditor/ckeditor5-media-embed : provides media embedding like video and tweets (official).
  • @ckeditor/ckeditor5-image : provides image handling EXCEPT uploading (official).
  • ckeditor5-upload-adapter : bridges the gap between the image plugin and YOUR server (NPM).
  • ckeditor5-syntaxer : provides a syntaxer-container that together with a syntaxing library can syntax content (NPM).
  • @ckeditor/ckeditor5-theme-lark : contains a theme (called lark) for the CKEditor5 (official).
• devDependencies : (objects inside these packages will be used by Webpack while building the editor object)
  • @ckeditor/ckeditor5-dev-webpack-plugin : used for localization (official).
  • @ckeditor/ckeditor5-dev-utils : contains a loader called styles that we will let Webpack use to apply the lark theme to the CKEditor 5.
  • postcss-loader : contains a css loader that we will let Webpack use together with styles from ckeditor5-dev-utils to apply the lark theme (official).
  • raw-loader : we use it to load .svg-files (official).
  • style-loader : we use it to load .css-files (official).
  • webpack : is already installed above, however if you installed Webpack locally, I include it here so that it is available (official).
  • webpack-cli : the commandline interface for Webpack exists in it's own package separated from the Webpack main functionality (official).

Max-Loaded app.js

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; // enables clipboard, Enter, ShiftEnter, typing and undo support
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
import FontSize from '@ckeditor/ckeditor5-font/src/font';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import StrikeThrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import List from '@ckeditor/ckeditor5-list/src/list';
import Link from '@ckeditor/ckeditor5-link/src/link';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import Syntaxer from 'ckeditor5-syntaxer';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import UploadAdapterPlugin from 'ckeditor5-upload-adapter';
 
export default class ClassicEditor extends ClassicEditorBase { }
 
ClassicEditor.builtinPlugins = [
   Essentials, //necessary, eg. Enter will not work within this plugin
   Bold,
   Italic,
   Heading,
   FontFamily,
   FontSize,
   FontBackgroundColor,
   FontColor,
   Underline,
   StrikeThrough,
   Subscript,
   Superscript,
   Alignment,
   BlockQuote,
   Highlight,
   Autoformat, // does not have any toolbar buttons, instead it allows the ckeditor to interprete different keyboard shortcuts
   List,
   Link,
   PasteFromOffice, // does not have any toolbar buttons, instead it makes the ckeditor able to handle paste from office
   Syntaxer,
   MediaEmbed,
   Image, // necessary
   ImageCaption, // adds a caption option to images
   ImageToolbar, // adds a floating style toolbar for image positioning
   ImageStyle, // adds the styles for the floating image toolbar for image positioning
   ImageUpload, // holds the image upload toolbar button
   UploadAdapterPlugin,
   Table,
   TableToolbar // adds a floating toolbar to the table for cell merging, row & column creation & deletion
];

Max-Loaded index.html

With new plugins come new configurations, configuration that with an intermediary CKEditor 5 object (like the one build in this tutorial) is done in the .html page that consumes the editor.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
   <script src="dist/ckeditor.js"></script>
   <script src="dist/translations/da.js"></script>
</head>
<body>
   <div id="editor">
       <p>Editor content goes here.</p>
   </div>
   <script>
       CustomEditor.create(document.querySelector('#editor'), {
           toolbar: [
               'heading', // Heading plugin
               '|', // separator
               'fontFamily', // FontFamily plugin
               'fontSize', // FontSize plugin
               'fontBackgroundColor', // FontBackgroundColor plugin
               'fontColor', // FontColor plugin
               'highlight', // Highlight plugin
               '|',
               'bold', // Bold plugin
               'italic', // Italic plugin
               'underline', // Underline plugin
               'strikeThrough', // StrikeThrough plugin
               'subScript', // Subscript plugin
               'superScript', // Superscript plugin
               '|',
               'numberedlist', // List plugin
               'bulletedlist', // List plugin
               '|',
               'blockQuote', // BlockQuote plugin
               'link', // Link plugin
               'insertTable', // Table plugin
               'imageupload', // ImageUpload plugin
               'syntaxer', // Syntaxer plugin
               '|',
               'undo', // Essentials plugin
               'redo' // Essentials plugin
           ],
           language: 'da',
           table: {
               contentToolbar: [ // TableToolbar plugin
                   'tableColumn',
                   'tableRow',
                   'mergeTableCells'
               ]
           },
           syntaxer: {
               languages: ['c#', 'php', 'sql', 'javascript', 'json', 'xml', 'html', 'css'],
               element: 'pre'
           },
           image: {
               toolbar: ['imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight'], // ImageToolbar plugin
               styles: [ // ImageStyle plugin
                   'full',
                   'alignLeft',
                   'alignRight'
               ]
           },
           uploadAdapter: {
               uploadUrl: '/home/ImageUpload' // url to http endpoint on your server for processing the uploaded image
                /*  
                 * It's your responsibility to save the image and return a relevant json object, eg. in case of success :
                 * {
                 *     uploaded: true,
                 *     url: urlToImageSavedOnYourServer
                 * }
                 */
           }
       })
       .then(editor => {
           window.editor = editor;
       })
       .catch(err => {
           console.error(err.stack);
       });
   </script>
</body>
</html>

That was all the code changes needed to create a max-loaded CKEditor 5.

Appendix : Common Errors & Solutions

 Error :  "npm ERR! cb.apply is not a function".

When : Installing npm packages using shell> npm install

Reason : I don't understand the reason, but it seems to be some kind of compatibility problem between maybe and older NPM in cache and a newer NPM installed.

Solution : 

1. Navigate a file explorer to C:\Users\{YourUsername}\AppData\Roaming
2. Delete the npm & npm-cache folders.
3. shell> npm clean cache --force : I have seen this as part of the solution, however it was not necessary for me.
4. Try installing npm packages again.

 Error : "No matching version found for ...".

When : Installing npm packages using shell> npm install

Reason : The version specified a specific package does not exists (in the screenshot above, I had specified version 22.0.0 for postcss-loader, however that version does not exists). 

Solution : 

1.  shell> npm show {package name} : find out what is the latest version for the relevant package.
2. Update your package.json file to reference an existing version.
3. Try install npm packages again.

 Error : "npm ERR! cb() never called".

When : Installing npm packages using shell> npm install

Rason : I have no idea.

Solution : I solved it the same way as for the "npm ERR! cb.apply is not a function" :

1. Navigate a file explorer to C:\Users\{YourUsername}\AppData\Roaming
2. Delete the npm & npm-cache folders.
3. Try installing npm packages again.

Error : "'webpack' is not recognized as an internal or external command, operable program or batch file."

When : Trying to execute webpack shell> webpack

Reason 1 : If webpack is NOT installed globally, you must execute webpack from it's install folder, that is: not from your package.json folder.

Solution 1 : If your current location is your package.json folder and you have installed webpack globally, then webpack will exists in node_modules and you can execute it like this : shell> node_modules\.bin\webpack

Reason 2 : If webpack IS installed globally, the problem likely is that the PATH environment variable have not been setup to point to the global webpack executable.

Solution 2 : Include the global webpack executable location (%USERPROFILE%\AppData\Roaming\NPM\) in the PATH environment variable :

1. Open Powershell.
2. shell> [Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User")
3. Try executing webpack again.

 Error : "path is not defined". (this error I only include here because the official CKEditor 5 build from source webpack.config.js will result in this error)

When : Executing webpack.

Reason : The typical webpack.config.js file will use a variable called path to calculate paths, often like this : path: path.resolve(__dirname, 'dist') - here the script is referencing a path variable (in bold), so if the path variable have not been declared & initialized, we will get the "path is not defined" error.

Solution : Declare a path variable at the top your webpack.config.js file and initialize it with the NPM 'path' module.

1. Open webpack.config.js in a text editor
2. Add the following statement to the top section : const path = require('path');