feat(editors): add a ckeditor component page

src/app/@shared/shared.module.ts

@@ -3,14 +3,16 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgaCardModule } from '@nga/theme';
+import { CKEditorModule } from 'ng2-ckeditor';
 
-@NgModule({
+@NgModule ({
   exports: [
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
     NgaCardModule,
+    CKEditorModule,
   ],
 })
 export class NgxSharedModule { }

src/app/pages/editors/ckeditor.component.ts

@@ -0,0 +1,30 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  AfterViewInit,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+
+import './ckeditor.loader';
+import 'ckeditor';
+
+@Component({
+  selector: 'ngx-ckeditor',
+  template: `
+    <nga-card>
+      <nga-card-body>
+        <ckeditor [config]="{extraPlugins: 'divarea'}"></ckeditor>
+      </nga-card-body>
+    </nga-card>
+  `,
+})
+export class NgxCKEditorComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/pages/editors/ckeditor.loader.ts

@@ -0,0 +1 @@
+window['CKEDITOR_BASEPATH'] = '//cdn.ckeditor.com/4.6.2/full-all/';

src/app/pages/editors/editors-routing.module.ts

@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { NgxEditorsComponent } from './editors.component';
 import { NgxTinyMCEComponent, NgxTinyMCEEditorComponent } from './tinyMCE.component';
+import { NgxCKEditorComponent } from './ckeditor.component';
 
 const routes: Routes = [
   {
@@ -13,6 +14,10 @@ const routes: Routes = [
         path: 'tinymce',
         component: NgxTinyMCEComponent,
       },
+      {
+        path: 'ckeditor',
+        component: NgxCKEditorComponent,
+      },
     ],
   },
 ];
@@ -23,4 +28,9 @@ const routes: Routes = [
 })
 export class NgxEditorsRoutingModule { }
 
-export const routedComponents = [NgxEditorsComponent, NgxTinyMCEComponent, NgxTinyMCEEditorComponent];
+export const routedComponents = [
+  NgxEditorsComponent,
+  NgxTinyMCEComponent,
+  NgxTinyMCEEditorComponent,
+  NgxCKEditorComponent,
+];

src/app/pages/pages-menu.ts

@@ -42,6 +42,10 @@ export const menuItems: List<NgaMenuItem> = List([
         title: 'TinyMCE',
         link: '/pages/editors/tinymce',
       },
+      {
+        title: 'CKEditor',
+        link: '/pages/editors/ckeditor',
+      },
     ]),
   },
 ]);