Setting up CKEditor with Angular 10

A few days ago, I had to implement a rich text editor with image upload in my Angular application when I came across CKEditor. It is a WYSIWYG(What You See IS What You Get) rich text editor with clean UI and allows a large number of plugins to be integrated with it.

Now, to insert an image to your server, you need to use a custom build of CKEditor with SimpleUploadAdapter plugin included in it. Here is the step by step solution of how to implement CKEditor 5 in Angular-10 application.

First, we need to install the CKEditor 5 editor component for Angular:

npm install --save @ckeditor5-angular

Now importCKEditorModule to you app.module.ts file:

//...
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { FormsModule } from '@angular/forms';
//...
@NgModule({
     imports: [
         CKEditorModule,
         //...     
     ],
     //...
 })

Then we create a custom build of our editor using online-builder wherein we remove CKFinder upload adapter and insert Simple upload adapter . You can add or remove other plugins according to your needs.

A Snapshot from CKEditor 5 online-builder

Download the custom build and extract it to your angular project(let’s say to a folder named ckeditor5). Now, if you want to implement your editor in a component named html-editor, import ckeditor.js from build folder of ckeditor5 in your html-editor.component.ts file and assign it to public property to make it accessible from the template.

import * as Editor from 'path_to_your_ckeditor5/build/ckeditor';
//...
export class HtmlEditorComponent implements OnInit {
    //...
    public Editor = Editor;
    //...
}

use the <ckeditor> tag in the html-editor.component.html to run the rich text editor:

<ckeditor [editor]="Editor" data="<p>hello world</p>"></ckeditor>

Open html-editor.component.css and add this :

::ng-deep .ck-editor__editable {
     min-height: 200px !important;
}

It sets its initial height to 200px, overwriting the previous setting. You can check the default by removing them. Now build your application using ng serve and open in a browser. It looks like this:

We can see the toolbar is not yet visible. This is because the editor is not yet configured. Now to configure the editor, you need to write a config object. So in your html-editor.component.ts add this(or you can write it in a different file and import it here) :

and in the html-editor.component.html file, add config object in the ckeditor tag as:

<ckeditor [config]="editorConfig" [editor]="Editor" data="<p>hello world</p>"></ckeditor>

Rebuild it and open it in your browser:

It looks like this

Congrats! Now you have successfully integrated CKEditor 5 into your Angular application. All that is left is just configuring the image upload.

Configuring image upload adapter:

So when one inserts an image in CKEditor, an event is triggered, and it uploads the image to the server and returns a JSON object containing the URL to CKEditor, which renders it using figure tag. You can read about it at https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html

All you need to do is configure SimpleUploadAdapter . To do this, add the given configuration to editorConfig in your html-editor.component.ts :

simpleUpload: {
    uploadUrl: 'https://your_post_request_api_to your server',
    withCredentials: true,
    headers: {
      'X-CSRF-TOKEN': 'CSFR-Token',
       Authorization: 'Bearer <JSON Web Token>',
    }
},

Write your server-side API to store the received image and return its URL in a JSON object.

You have successfully implemented a rich text editor with image upload functionality enabled in it.

Thanks for reading!