How to implement CKEditor in Angular app?

Without using CDN's in the project and including CKEditor plugins to the project. Here is how I tackled the problem:

Install ng2-ckeditor with ckeditor using npm.

npm install --save ckeditor

and

npm install --save ng2-ckeditor

Update the angular-cli.json to be able to add plugins to the instance of CKEditor. In the assets section of angular-cli.json add:

"assets": [
    "assets",
    "favicon.ico",
    {
       "glob": "**/*", 
       "input": "../node_modules/ckeditor/", 
       "output": "assets/js/ckeditor/", 
       "allowOutsideOutDir": true
    }
 ]

add also ckeditor.js from the downloaded npm to the script-tag in angular-cli.json:

"scripts": [
   "../node_modules/ckeditor/ckeditor.js"
]

Download the plugins that you need to use to the folder /assets/js/ckeditor/plugins/ of your project. Be sure that the plugin.js file exists in each subfolder of your plugins folder.

Create your own config file assets/js/ckeditor/ckeditor-config.js for ckeditor with the following content:

(function(){
    CKEDITOR.basePath = '/assets/js/ckeditor/'
    CKEDITOR.plugins.addExternal('wordcount', 'plugins/wordcount/');
    CKEDITOR.plugins.addExternal('notification', 'plugins/notification/');
    CKEDITOR.editorConfig = function( config ) {
        config.extraPlugins = 'wordcount,notification';
    }
})();

Create an internal service to be able to configure your ckeditor with your own input. Here I'm using the service to adjust the height and set the maximum limit of my characters from my ckeditor component. I'm also telling the plugin I am using to display only the character counter.

import { Injectable } from '@angular/core';

@Injectable()
export class CkeditorConfigService {

  constructor() { }
  public getConfig(height: number, maxCharCount: number){
    return {
      customConfig: '/assets/js/ckeditor/ckeditor-config.js',
      height: height,
      wordcount: {
        showParagraphs: false,
        showWordCount: false,
        showCharCount: true,
        maxCharCount: maxCharCount
      }
    };
  }
}

As ckeditor is a form section, you need to add FormsModule to your app.module.ts, as well as the ng2-ckeditor module.

imports: [
   ...
   FormsModule,
   CKEditorModule,
   ...
]

From your component add the internal service.

@Component({
  selector: 'test-ckeditor-app',
  templateUrl: './editor.component.html',
  providers: [
    CkeditorConfigService
  ]
})
export class EditorComponent implements OnInit {
  ckeditorContent: string = '<p>Some html</p>';
  private myCkeditorConfig: any;
  constructor(private ckService: CkeditorConfigService) {}

  ngOnInit() {
    this.myCkeditorConfig = this.ckService.getConfig(150, 400);
  }

}

And finally in your html file add the following:

<ckeditor
   [(ngModel)]="ckeditorContent"
   [config]="myCkeditorConfig">
</ckeditor>

Please find the project sample on github:

https://github.com/dirbacke/ckeditor4

Note! When you compile and run, you will get the MIME-type console warning. That is because the css files specified in the warning have comments.

The official CKEditor 4 Angular integration for Angular 5+ has recently been published. It may help solve your issue.

The basic usage is pretty straightforward: in order to create an editor instance in Angular, install the ckeditor4-angular npm package as a dependency of your project:

npm install --save ckeditor4-angular

After installing, import CKEditorModule to your application:

import { CKEditorModule } from 'ckeditor4-angular';

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

And then you can use the <ckeditor> tag in the component template to include the rich text editor:

<ckeditor data="<p>Hello, world!</p>"></ckeditor>

The data attribute used in the example above is responsible for setting the editor’s data.

For more advanced configuration you may refer to the official CKEditor 4 Angular integration guide.