Using CKEditor 5 with an Angular Application

During web development process, one of the key factors to increase development performance and efficiency is to use editors. There are plenty of editors for web applications and it can be confusing which one to choose. In this article, I will explain how to use CKEditor step by step. CKEditor has a useful tool for you to design your projects in 5 simple steps and is easy to integrate. With this online tool, you can add or extract some editor features and get ready to use script and translation files. Although that way sounds fast and practical, to perform those operations manually according to your need, you can follow the steps below.

Requirements

Node.js 12.0.0+
npm 5.7.1+
Git

Forking Stable CKEditor5 Repository

git clone -b stable https://github.com/ckeditor/ckeditor5.git

It’s important to fork stable, it is the recommended branch.

Adding Wanted Plugins and Custom Building

There are different editor templates like classic, inline, balloon. I chose the classic editor and wanted to add some features. First, to install classic editor run the command below:

cd ckeditor5/packages/ckeditor5-build-classic/ C:\ckeditor5\packages\ckeditor5-build-classic>npm i

In order to exclude features included in the basic package, you should create a custom build. That’s why custom build is powerful.

For example, let’s add Alignment plugin and some properties to table toolbar. Open packages/ckeditor5-build-classic/src/ckeditor.js file.

1- First, add import directives.

2- Add plugins to builtinPlugins section.

3- Edit config section with new references for toolbar.

4- Finally, save it all and run npm run build!

C:\ckeditor5\packages\ckeditor5-build-classic>npm run build

Implement Custom Build Files

After build is successful, newly built files are saved in the build directory. You can copy ckeditor.js and translation file and use in your web application.

Here is the simple example with Angular application.