ng-CKEditor

<!DOCTYPE html>
<html>

<head>
  <title>angular2 playground</title>
  <link rel="stylesheet" href="style.css" />

  <script src="https://cdn.ckeditor.com/4.5.8/standard/ckeditor.js"></script>

  <script src="https://npmcdn.com/zone.js@0.6.12"></script>
  <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
  <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
  <script src="config.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

<body>
  <my-app>
    Loading...
  </my-app>
</body>

</html>

/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 * Override at the last minute with global.filterSystemConfig (as plunkers do)
 */
(function(global) {

  var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var map = {
    'app': 'src', // 'dist',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': {
      main: 'main.ts',
      defaultExtension: 'ts'
    },
    'rxjs': {
      defaultExtension: 'js'
    },
    'angular2-in-memory-web-api': {
      defaultExtension: 'js'
    },
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = {
      main: 'index.js',
      defaultExtension: 'js'
    };
  });

  // Router & Forms API
  map['@angular/forms'] = 'https://npmcdn.com/@angular/forms@0.3.0';
  packages['@angular/forms'] = {
    main: 'index.js',
    defaultExtension: 'js'
  };

  map['@angular/router'] = 'https://npmcdn.com/@angular/router@3.0.0-rc.1';
  packages['@angular/router'] = {
    main: 'index.js',
    defaultExtension: 'js'
  };

  // ng2-ckeditor
  map['ng2-ckeditor'] = 'https://npmcdn.com/ng2-ckeditor@1.0.4';
  packages['ng2-ckeditor'] = {
    main: 'lib/CKEditor.js',
    defaultExtension: 'js'
  };

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) {
    global.filterSystemConfig(config);
  }

  System.config(config);

})(this);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

//our root app component
import {Component} from '@angular/core';
import {CKEditor} from 'ng2-ckeditor';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <ckeditor [(ngModel)]="content" [config]="config" debounce="500">
      <p>Hello <strong>world</strong></p>
    </ckeditor>
    <div [innerHTML]="content"></div>
  `,
  directives: [CKEditor]
})
export class App {
  public config = {
    uiColor: '#FFFFFF',
    height: 150,
    resize_enabled: false,
    removePlugins :'elementspath',
    removeButtons : 'ToolbarBreak,Save,NewPage,Print,Templates,Cut,Copy,Redo,Replace,Find,SelectAll,Scayt,Undo,Paste,PasteText,PasteFromWord,Form,Radio,TextField,Textarea,Checkbox,Select,Button,ImageButton,HiddenField,Superscript,Subscript,RemoveFormat,Outdent,Indent,Blockquote,CreateDiv,Language,BidiRtl,BidiLtr,Anchor,Unlink,Link,Image,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,Styles,TextColor,Maximize,About,ShowBlocks,BGColor,Format,Font,FontSize'
  };
  constructor() {
    this.content = '<p>Hello <strong>World !</strong></p>'
  }
}

//main entry point
import {Component, provide} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Http, HTTP_PROVIDERS} from '@angular/http';
import {APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from "@angular/common";
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import {App} from './app';

bootstrap(App, [
   provide(APP_BASE_HREF, { useValue: "/base/app" }),
   disableDeprecatedForms(),
   provideForms(),
  ])
  .catch(err => console.error(err));

/* Styles go here */

.cke_toolbar_break {
  display: none !important;
}