Angular 2 and ng2-ckeditor sample fork

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    
    <script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
    
    <script src="https://npmcdn.com/zone.js@0.6.25"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.39/system.js"></script>
    <script src="https://npmcdn.com/typescript@2.0.3/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>

/* Styles go here */

/**
 * 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 = '@latest'; // 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.4.2',
    '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',
      '@angular/forms',
      '@angular/router',
  ];

  // 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' };
  });*/
  
  // ng2-ckeditor
  map['ng2-ckeditor'] = 'https://npmcdn.com/ng2-ckeditor@latest';
  packages['ng2-ckeditor'] = { main: 'lib/index.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
*/

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {CKEditorModule} from 'ng2-ckeditor';

import {AppComponent} from './app.component';
import {TemplateFormComponent} from "./template-form.component";
import {ReactiveFormComponent} from "./reactive-form.component";

/**
 * App main module
 */
@NgModule({
  imports:      [
    BrowserModule,
    FormsModule, 
    ReactiveFormsModule, 
    CKEditorModule
  ],
  declarations: [
    AppComponent, 
    TemplateFormComponent, 
    ReactiveFormComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

/**
 * Angular 2 bootstrap
 */
platformBrowserDynamic().bootstrapModule(AppModule);

//our root app component
import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1>CKEditor Demo</h1>
  <h2>Template-Driven Form</h2>
  <template-form 
    [content]="content"
    [options]="options">
  </template-form>
  <h2>Reactive Form</h2>
  <reactive-form
    [content]="content"
    [options]="options">
  </reactive-form>
  `,
})
export class AppComponent {
  content: string;
  options: any;
  constructor() {
    this.content = '<p>Hello <strong>world !</strong></p>'
    this.options = {
      removePlugins: 'colorbutton,colordialog,find,font,format,image,justify,table,tableresize,tabletools,link,sourcearea', 
      removeButtons: 'Strike,Subscript,Superscript,PasteFromWord', 
      toolbarGroups: [
    		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    		{ name: 'basicstyles', groups: [ 'basicstyles' ] },
    		{ name: 'paragraph',   groups: [ 'list', 'indent' ] },
    		{ name: 'tools' },
    		{ name: 'about' },
    		{ name: 'document',	   groups: [ 'mode' ] }
    	]
    }
  }
  
}

import {Component, Input} from "@angular/core";

@Component({
  selector: "template-form", 
  template: `
  <form>
    <div>
      <label>Note</label>
      <ckeditor 
        [ngModel]="content" 
        [config]="options"
        debounce="500"
        name="note" 
        #note="ngModel">
        <ckbutton
          name="saveButton"
          command="saveCmd"
          label="Save Document"
          toolbar="clipboard, 1"
          (click)="save($event)">
        </ckbutton>
      </ckeditor>
    </div>
    <button type="submit">Save</button>
  </form>
  <!-- diagnostic dump -->
  <hr>
  <p><b>HTML from the model</b></p>
  <p [innerHTML]="content"></p>
  <p><b>HTML from the form</b></p>
  <p [innerHTML]="note.value"></p>
  `
})
export class TemplateFormComponent {
  @Input() content;
  @Input() options;
  
  // handler registered with the "saveButton" ckbutton
  save(evt: any) {
    console.log(evt);
  }
}

import {Component, Input, OnInit} from "@angular/core";
import {FormControl} from "@angular/forms";

@Component({
  selector: "reactive-form", 
  template: `
  <form>
    <div>
      <label>Note</label>
      <ckeditor 
        [config]="options" 
        [formControl]="note">
      </ckeditor>
    </div>
    <button type="submit">Save</button>
  </form>
  <!-- diagnostic dump -->
  <hr>
  <p><b>HTML from the model</b></p>
  <p [innerHTML]="content"></p>
  <p><b>HTML from the form</b></p>
  <p [innerHTML]="note.value"></p>
  `
})
export class ReactiveFormComponent implements OnInit {
  @Input() content;
  @Input() options;
  
  note: FormControl;
  
  constructor() {
    this.note = new FormControl("");
  }
  
  ngOnInit() {
    this.note.setValue(this.content);
  }
}