fix(ckeditor): fix ckeditor loader

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

@@ -1,19 +1,20 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component } from '@angular/core';
 
-import './ckeditor.loader.ts';
+import './ckeditor.loader';
+import 'ckeditor';
+import 'style-loader!./ckeditor.scss';
 
 @Component({
   selector: 'ckeditor-component',
-  // encapsulation: ViewEncapsulation.None,
   templateUrl: './ckeditor.html',
-  styleUrls: ['./ckeditor.scss']
 })
 
 export class Ckeditor {
   public ckeditorContent:string = '<p>Hello CKEditor</p>';
   public config = {
     uiColor: '#F0F3F4',
-    height: '600'
+    height: '600',
+    extraPlugins: 'divarea',
   };
 
   constructor() {

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

@@ -1,2 +1 @@
-window['CKEDITOR_BASEPATH'] = '//cdn.ckeditor.com/4.6.0/standard/';
+window['CKEDITOR_BASEPATH'] = '/ckeditor/';
-import 'ckeditor';

src/app/pages/editors/components/ckeditor/ckeditor.scss

@@ -1,5 +1,6 @@
 @import '../../../../theme/sass/conf/conf';
 
-.cke_source {
+.cke_wysiwyg_div {
-  color: $dropdown-text!important;
+  padding: 20px !important;
+  color: $ckeditor-text !important;
 }

src/app/theme/sass/conf/colorSchemes/_ng2.scss

@@ -13,6 +13,7 @@ $border-light: rgba(255, 255, 255, 0.3); // lighter version of border color (for
 $input-border: rgba(255, 255, 255, 0.6); // input border color
 $input-background: rgba(255, 255, 255, 0.1); // input border color for hover
 $dropdown-text: #7d7d7d; // dropdown text color
+$ckeditor-text: #333;
 
 // sidebar colors
 $sidebar: #282828;