Metronic 8 Angular CKEditor integration

Readme.md

!!! Check out the official documentation of CKEditort first https://ckeditor.com/docs/ckeditor4/latest/guide/dev_angular.html.

1. Run the command: yarn add ckeditor4-angular.
2. import CKEditorModule to your application.
3. Add variable editorData and method onChange into code behind (See example in your.component.ts file).
4. Add ckeditor into your HTML markup (See example in your.component.html file).

your.component.html

<div>
  <ckeditor [data]="editorData" (change)="onChange($event)"></ckeditor>
</div>

your.component.ts

import { CKEditor4 } from 'ckeditor4-angular';

export class YourComponent implements OnInit {
  public editorData = '<p>Hello, world!</p>';
  
  public onChange(event: CKEditor4.EventInfo) {
    this.editorData = event.editor.getData();
    console.log(this.editorData);
  }
}

your.module.ts

import { CKEditorModule } from 'ckeditor4-angular';

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

...

Hello, but is ckeditor4 is old, not supported right now. ckeditor5 is available.

hello