In this article, We learn how to implement CKEditor5 Classic in Angular. I will show how to do it, and just follow the steps clearly. 

For more updates please do Subscribe via Email:

Table Of Contents
  1. CKEditor
  2. Installation of CKEditor5 Classic
  3. Implementation
  4. Output
  5. Issues
  6. Solution
  7. Related Topics

CKEditor

CKEditor is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications. Its core code is written in JavaScript and it is developed by CKSource.

CKEditor 5 is an ultra-modern JavaScript rich text editor with MVC architecture, custom data model and virtual DOM. It is written from scratch in ES6 and has excellent webpack support. Native integrations with Angular, React and Vue.js are available for your convenience.

Installation of CKEditor5 Classic

we need to install two Ckeditor packages to successfully implemented the CKEditor, this are the two packages listed below.

  • @ckeditor/ckeditor5-angular
  • @ckeditor/ckeditor5-build-classic

To install the first package, run this code in your terminal. this will pick up the latest version of @ckeditor/ckeditor5-angular.

npm install --save @ckeditor/ckeditor5-angular

or you can run and install specific version.

// npm install --save @ckeditor/ckeditor5-angular@Version
npm install --save @ckeditor/ckeditor5-angular@2.0.2

you can visit this LINK for more version option.

Now, run the installation of the second package, run this in your terminal. his will pick up the latest version of @ckeditor/ckeditor5-build-classic. 

npm install --save @ckeditor/ckeditor5-build-classic

you can run and install specific version. 

//npm install --save @ckeditor/ckeditor5-build-classic@Version
npm install --save @ckeditor/ckeditor5-build-classic@29.2.0

you can visit this LINK for more version option.

refer to the specific version and see the Link provided. make sure to install the version package which is compatible of the version or your angular project.

Implementation

Now, add CKEditorModule to app.module files.

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule( {
    imports: [
        CKEditorModule,
        // ...
    ],
    // ...
} )

Import the ClassicEditor in your angular component or in your typescript file and assign  it to a public property to make it accessible

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component( {
    // ...
} )
export class MyComponent {
    public Editor = ClassicEditor;
    // ...
}

Finally, use the <ckeditor> tag in the template to run the rich text editor:

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

Output

Issues

During implementing this packages and you are facing like this issue bellow. refer the solution on how to fixed it.

Cannot find module ‘@ckeditor/ckeditor5-build-classic’ or its corresponding type declarations.

Solution

first create a file and name it typings.d.ts and put it inside the component folder or any where in the project. And copy and paste this code in that file.

declare module '@ckeditor/ckeditor5-build-classic' {
  const ClassicEditorBuild: any;

  export = ClassicEditorBuild;
}

Thank you for visiting my Blogsite, for more updates every new post here, subscribe via email to git notify.

GitHub link: https://github.com/JaveTLupango/AngularCRUD/tree/CKEditor/src/app/ckeditor

Related Topics

By: Jave LupangoPosted on Categories : Categories : Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *