Кнопки окраски Ckeditor не окрашивают текст в Angular 6

Question

Я использую Ckeditor со ссылкой CDN в своем проекте Angular CMS.Все работает, кроме раскрасок.Я выбираю цвет в редакторе, и он показывает мне цветной текст, но когда я сохраняю его и извлекаю этот текст, он показывает встроенный CSS в API в json, но этот CSS не работает, даже если этот CSS не отображается в inspect.

Это JSON Response

{
   "id": 17,
   "title": "Blog",
   "slug": "blog",
   "content":"<p>
                <span style=\"color:#27ae60\">BLOG&nbsp;</span>
              </p>\n\n
              <p>
                <span style=\"color:#c0392b\">this is blog content</span> 
              </p>\n",
   "hasSidebar": "no"
}

Это то, что он показывает, когда я покрасил свой текст

Это выглядит прекрасно

, но когда я получаю этот текстиз базы данных не отображаются цвета.

Здесь не отображаются цвета

Отображаются все эффекты, такие как полужирный или заголовки , но не показывает цвета текста.

Это мой угловой код

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { PageService } from '../../services/page.service';

declare var CKEDITOR: any;

@Component({
  selector: 'app-admin-add-page',
  templateUrl: './admin-add-page.component.html',
  styleUrls: ['./admin-add-page.component.css']
})
export class AdminAddPageComponent implements OnInit {

  errorMsg = false;
  successMsg = false;
  title: string;
  content: string;

  constructor(
    private router: Router,
    private pageService: PageService
  ) { }

  ngOnInit() {
    if (localStorage.getItem('user') !== '"admin"') {
      this.router.navigateByUrl('');
    } else {
      CKEDITOR.addCss('body {word-break:break-all;}');
      CKEDITOR.replace('content');
    }
  }

  addPage({form, value, valid}) {
    console.log(form);
    // form.reset();

    if (valid) {
      value.content = CKEDITOR.instances.content.getData();
      this.pageService.postAddPage(value).subscribe(
        res => {
          if (res === 'pageExists') {
            this.errorMsg = true;
            setTimeout(function() {
              this.errorMsg = false;
            }.bind(this), 2000);
          } else {
            this.successMsg = true;
            setTimeout(function() {
              this.successMsg = false;
            }.bind(this), 2000);

          this.pageService.getPages().subscribe(pages => {
            this.pageService.PagesBS.next(pages);
          });
          CKEDITOR.instances.content.setData('');
      }
    }
  );
} else {
  console.log('Form is not valid');
  }
 }
}

Браузер показывает мне в проверке

<div _ngcontent-c3="">
   <h1>
     <span>Page</span>
   </h1>
   <p>
      <strong>Page Content&nbsp;</strong>
   </p>
</div>

Как вы можете видеть, что нет стиля для раскраски, но когда я редактирую это в том же Ckeditor, я вдруг показываю мне раскраску текста.

Что не так и как это исправить.

Я использую Ckeditor CDN по следующей ссылке в index.html

<script src="//cdn.ckeditor.com/4.10.1/full/ckeditor.js"></script>