.

Anan Sangthongtum
Showing 29 changed files with 648 additions and 0 deletions Show diff stats
README.md
e2e/app.e2e-spec.ts
e2e/app.po.ts
e2e/tsconfig.e2e.json
karma.conf.js
package.json
protractor.conf.js
src/app/app.component.css
src/app/app.component.html
src/app/app.component.spec.ts
src/app/app.component.ts
src/app/app.module.ts
src/app/components/froala.component.ts
src/app/components/pageNotFound.component.ts
src/app/components/tinymce.component.ts
src/assets/.gitkeep
src/environments/environment.prod.ts
src/environments/environment.ts
src/favicon.ico
src/index.html
+++ a/README.md
@@ -0,0 +1,27 @@
+# DemoEditer
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+++ a/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('demo-editer App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});
+++ a/e2e/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}
+++ a/e2e/tsconfig.e2e.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
+++ a/karma.conf.js
@@ -0,0 +1,33 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
+++ a/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "demo-editer",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^5.2.0",
+    "@angular/common": "^5.2.0",
+    "@angular/compiler": "^5.2.0",
+    "@angular/core": "^5.2.0",
+    "@angular/forms": "^5.2.0",
+    "@angular/http": "^5.2.0",
+    "@angular/platform-browser": "^5.2.0",
+    "@angular/platform-browser-dynamic": "^5.2.0",
+    "@angular/router": "^5.2.0",
+    "@tinymce/tinymce-angular": "^2.0.0",
+    "angular-froala-wysiwyg": "^2.8.4-1",
+    "core-js": "^2.4.1",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.3.1",
+    "rxjs": "^5.5.6",
+    "zone.js": "^0.8.19"
+  },
+  "devDependencies": {
+    "@angular/cli": "~1.7.4",
+    "@angular/compiler-cli": "^5.2.0",
+    "@angular/language-service": "^5.2.0",
+    "@types/jasmine": "~2.8.3",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "^4.0.1",
+    "jasmine-core": "~2.8.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~4.1.0",
+    "tslint": "~5.9.1",
+    "typescript": "~2.5.3"
+  }
+}
+++ a/protractor.conf.js
@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
+++ a/src/app/app.component.css
+++ a/src/app/app.component.html
@@ -0,0 +1,6 @@
+<nav>
+  <a routerLink="/tinymce" routerLinkActive="active">tinymce</a>
+  <a routerLink="/froala" routerLinkActive="active">froala</a>
+</nav>
+
+  <router-outlet></router-outlet>
+++ a/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});
+++ a/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app';
+}
+++ a/src/app/app.module.ts
@@ -0,0 +1,40 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+
+import { AppComponent } from './app.component';
+import { RouterModule, Routes } from '@angular/router';
+import { TinymceComponent }     from './components/tinymce.component';
+import { FroalaComponent }     from './components/froala.component';
+import { PageNotFoundComponent }     from './components/pageNotFound.component';
+import { EditorModule } from '@tinymce/tinymce-angular';
+import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
+import { FormsModule } from '@angular/forms';
+const appRoutes: Routes = [
+  { path: '', component: TinymceComponent },
+  { path: 'tinymce', component: TinymceComponent },
+  { path: 'froala', component: FroalaComponent },
+  { path: '**', component: PageNotFoundComponent }
+];
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    TinymceComponent,
+    FroalaComponent,
+    PageNotFoundComponent
+  ],
+  imports: [
+    FormsModule,
+    FroalaEditorModule.forRoot(), FroalaViewModule.forRoot(),
+    EditorModule,
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    ),
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+++ a/src/app/components/froala.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `<h2>Froala Two way Binding</h2>
+
+  <div [froalaEditor] [(froalaModel)]="dataModel"></div>
+
+
+    {{dataModel}}
+  `
+})
+export class FroalaComponent {
+  dataModel:string = `<p>36aaaaa</p><table style="width: 100%;"><thead><tr><th><br></th><th><br></th><th><br></th><th><br></th><th><br></th><th><br></th><th><br></th><th><br></th></tr></thead><tbody><tr><td class="fr-highlighted" style="width: 7.1891%; background-color: rgb(235, 107, 86);"><br></td><td class="fr-highlighted" style="width: 7.1891%; background-color: rgb(184, 49, 47);"><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td colspan="2" style="width: 14.2857%;"><br></td><td style="width: 14.2857%;"><table style="width: 100%;"><tbody><tr><td style="width: 16.6667%;"><br></td><td style="width: 16.6667%;"><br></td><td style="width: 16.6667%;"><br></td><td style="width: 16.6667%;"><br></td><td style="width: 16.6667%;"><br></td><td style="width: 16.6667%;"><br></td></tr><tr><td style="width: 16.6667%;"><br></td><td style="width: 16.6667%;"><br></td><td style="width: 16.6667%;"><br></td><td style="width: 16.6667%;"><br></td><td style="width: 16.6667%;"><br></td><td style="width: 16.6667%;"><br></td></tr></tbody></table><br></td><td style="width: 14.2857%; background-color: rgb(61, 142, 185);"><br></td><td style="width: 14.2857%; background-color: rgb(84, 172, 210);">aaa</td><td style="width: 14.2857%;"><br></td><td style="width: 14.2857%;"><br></td><td style="width: 14.2857%;"><br></td></tr><tr><td colspan="2" style="width: 14.2857%;">aa</td><td class="fr-highlighted" style="width: 14.2857%; text-align: right;">aa</td><td style="width: 14.2857%;">aa</td><td style="width: 14.2857%;">aaa</td><td style="width: 14.2857%;"><br></td><td style="width: 14.2857%;"><br></td><td style="width: 14.2857%;"><br></td></tr><tr><td colspan="2" style="width: 14.2857%;">aa</td><td style="width: 14.2857%;">aa</td><td style="width: 14.2857%; background-color: rgb(84, 172, 210);">aa</td><td style="width: 14.2857%;">aaa</td><td style="width: 14.2857%;"><br></td><td style="width: 14.2857%;"><br></td><td style="width: 14.2857%;"><br></td></tr></tbody></table><h1>test</h1><p><span style="font-size: 20px; color: red;">sdasdasdasd</span></p>`
+}
+++ a/src/app/components/pageNotFound.component.ts
@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: '<h2>Page not found</h2>'
+})
+export class PageNotFoundComponent {}
+++ a/src/app/components/tinymce.component.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+  <h2>Tiny Mce Two way Binding</h2>
+  <editor apiKey="uzbt478yqnylj2r2q44eh97rvsqmppn53wr58akhlurwzav9" [init]="init" [(ngModel)]="dataModel" cloudChannel="dev"></editor>
+
+
+  {{dataModel}}
+  `
+})
+export class TinymceComponent {
+  dataModel:string = `<!DOCTYPE html> <html> <head> </head> <body> <p><span style="background-color: #000080; color: #33cccc;"><strong><span style="text-decoration: underline;">sdsdsd</span></strong></span></p> <p>&nbsp;</p> <table style="border-collapse: collapse; width: 54.9891%; height: 149px;" border="1"> <tbody> <tr style="height: 49px; background-color: #8b32cf; border-color: #6231bd;"> <td style="width: 20%; height: 49px;">sadas <table style="border-collapse: collapse; width: 100%;" border="1"> <tbody> <tr> <td style="width: 33.3333%;">&nbsp;</td> <td style="width: 33.3333%;">&nbsp;</td> <td style="width: 33.3333%; background-color: #14b343;">&nbsp;</td> </tr> <tr> <td style="width: 33.3333%;">&nbsp;</td> <td style="width: 33.3333%;">&nbsp;</td> <td style="width: 33.3333%;">&nbsp;</td> </tr> <tr> <td style="width: 33.3333%;">&nbsp;</td> <td style="width: 33.3333%;">&nbsp;</td> <td style="width: 33.3333%;">&nbsp;</td> </tr> </tbody> </table> </td> <td style="width: 20%; height: 49px;"><span style="background-color: #008080;">asdas</span></td> <td style="width: 20%; height: 49px;"><span style="color: #ccffff;">asdasasd</span></td> <td style="width: 20%; height: 49px;">&nbsp;</td> <td style="width: 20%; height: 49px;">&nbsp;</td> </tr> <tr style="height: 49px;"> <td style="width: 20%; height: 49px;"><span style="background-color: #003300;">asd</span></td> <td style="width: 20%; height: 49px;">&nbsp;</td> <td style="width: 20%; height: 49px;">asdasd</td> <td style="width: 20%; height: 49px;">&nbsp;</td> <td style="width: 20%; height: 49px;">asdas</td> </tr> <tr style="height: 49px;"> <td style="width: 20%; height: 49px;">asdasd</td> <td style="width: 20%; height: 49px;">dasd</td> <td style="width: 20%; height: 49px;">asda</td> <td style="width: 20%; height: 49px;">&nbsp;</td> <td style="width: 20%; height: 49px;">&nbsp;</td> </tr> <tr style="height: 49px;"> <td style="width: 20%; height: 49px;">&nbsp;</td> <td style="width: 20%; height: 49px;">&nbsp;</td> <td style="width: 20%; height: 49px;">&nbsp;</td> <td style="width: 20%; height: 49px;">sdasd</td> <td style="width: 20%; height: 49px;">asd</td> </tr> </tbody> </table> <p>&nbsp;</p> <ol> <li>123asdasd</li> <li>123</li> <li>asd123</li> <li>123</li> <li>123</li> </ol> </body> </html>`
+  init:any = {
+    selector: 'textarea',
+    height: 500,
+    theme: 'modern',
+    plugins: 'print preview fullpage powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount tinymcespellchecker a11ychecker imagetools mediaembed  linkchecker contextmenu colorpicker textpattern help',
+    toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
+    image_advtab: true,
+    templates: [
+      { title: 'Test template 1', content: 'Test 1' },
+      { title: 'Test template 2', content: 'Test 2' }
+    ],
+    content_css: [
+      '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
+      '//www.tinymce.com/css/codepen.min.css'
+    ]
+   }
+}
+++ a/src/assets/.gitkeep
+++ a/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
+++ a/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};
+++ a/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>DemoEditer</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
+++ a/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));
+++ a/src/polyfills.ts
@@ -0,0 +1,79 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+++ a/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
+++ a/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+++ a/src/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}
+++ a/src/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
+++ a/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
+++ a/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}
+++ a/tslint.json
@@ -0,0 +1,143 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs",
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "no-output-on-prefix": true,
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}
	1	+++ a/README.md
...	...	@@ -0,0 +1,27 @@
	1	+# DemoEditer
	2	+
	3	+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.4.
	4	+
	5	+## Development server
	6	+
	7	+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
	8	+
	9	+## Code scaffolding
	10	+
	11	+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive\|pipe\|service\|class\|guard\|interface\|enum\|module`.
	12	+
	13	+## Build
	14	+
	15	+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
	16	+
	17	+## Running unit tests
	18	+
	19	+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
	20	+
	21	+## Running end-to-end tests
	22	+
	23	+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
	24	+
	25	+## Further help
	26	+
	27	+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
...	...
	1	+++ a/e2e/app.e2e-spec.ts
...	...	@@ -0,0 +1,14 @@
	1	+import { AppPage } from './app.po';
	2	+
	3	+describe('demo-editer App', () => {
	4	+ let page: AppPage;
	5	+
	6	+ beforeEach(() => {
	7	+ page = new AppPage();
	8	+ });
	9	+
	10	+ it('should display welcome message', () => {
	11	+ page.navigateTo();
	12	+ expect(page.getParagraphText()).toEqual('Welcome to app!');
	13	+ });
	14	+});
...	...
	1	+++ a/e2e/app.po.ts
...	...	@@ -0,0 +1,11 @@
	1	+import { browser, by, element } from 'protractor';
	2	+
	3	+export class AppPage {
	4	+ navigateTo() {
	5	+ return browser.get('/');
	6	+ }
	7	+
	8	+ getParagraphText() {
	9	+ return element(by.css('app-root h1')).getText();
	10	+ }
	11	+}
...	...
	1	+++ a/e2e/tsconfig.e2e.json
...	...	@@ -0,0 +1,14 @@
	1	+{
	2	+ "extends": "../tsconfig.json",
	3	+ "compilerOptions": {
	4	+ "outDir": "../out-tsc/e2e",
	5	+ "baseUrl": "./",
	6	+ "module": "commonjs",
	7	+ "target": "es5",
	8	+ "types": [
	9	+ "jasmine",
	10	+ "jasminewd2",
	11	+ "node"
	12	+ ]
	13	+ }
	14	+}
...	...
	1	+++ a/karma.conf.js
...	...	@@ -0,0 +1,33 @@
	1	+// Karma configuration file, see link for more information
	2	+// https://karma-runner.github.io/1.0/config/configuration-file.html
	3	+
	4	+module.exports = function (config) {
	5	+ config.set({
	6	+ basePath: '',
	7	+ frameworks: ['jasmine', '@angular/cli'],
	8	+ plugins: [
	9	+ require('karma-jasmine'),
	10	+ require('karma-chrome-launcher'),
	11	+ require('karma-jasmine-html-reporter'),
	12	+ require('karma-coverage-istanbul-reporter'),
	13	+ require('@angular/cli/plugins/karma')
	14	+ ],
	15	+ client:{
	16	+ clearContext: false // leave Jasmine Spec Runner output visible in browser
	17	+ },
	18	+ coverageIstanbulReporter: {
	19	+ reports: [ 'html', 'lcovonly' ],
	20	+ fixWebpackSourcePaths: true
	21	+ },
	22	+ angularCli: {
	23	+ environment: 'dev'
	24	+ },
	25	+ reporters: ['progress', 'kjhtml'],
	26	+ port: 9876,
	27	+ colors: true,
	28	+ logLevel: config.LOG_INFO,
	29	+ autoWatch: true,
	30	+ browsers: ['Chrome'],
	31	+ singleRun: false
	32	+ });
	33	+};
...	...
	1	+++ a/package.json
...	...	@@ -0,0 +1,52 @@
	1	+{
	2	+ "name": "demo-editer",
	3	+ "version": "0.0.0",
	4	+ "license": "MIT",
	5	+ "scripts": {
	6	+ "ng": "ng",
	7	+ "start": "ng serve",
	8	+ "build": "ng build --prod",
	9	+ "test": "ng test",
	10	+ "lint": "ng lint",
	11	+ "e2e": "ng e2e"
	12	+ },
	13	+ "private": true,
	14	+ "dependencies": {
	15	+ "@angular/animations": "^5.2.0",
	16	+ "@angular/common": "^5.2.0",
	17	+ "@angular/compiler": "^5.2.0",
	18	+ "@angular/core": "^5.2.0",
	19	+ "@angular/forms": "^5.2.0",
	20	+ "@angular/http": "^5.2.0",
	21	+ "@angular/platform-browser": "^5.2.0",
	22	+ "@angular/platform-browser-dynamic": "^5.2.0",
	23	+ "@angular/router": "^5.2.0",
	24	+ "@tinymce/tinymce-angular": "^2.0.0",
	25	+ "angular-froala-wysiwyg": "^2.8.4-1",
	26	+ "core-js": "^2.4.1",
	27	+ "font-awesome": "^4.7.0",
	28	+ "jquery": "^3.3.1",
	29	+ "rxjs": "^5.5.6",
	30	+ "zone.js": "^0.8.19"
	31	+ },
	32	+ "devDependencies": {
	33	+ "@angular/cli": "~1.7.4",
	34	+ "@angular/compiler-cli": "^5.2.0",
	35	+ "@angular/language-service": "^5.2.0",
	36	+ "@types/jasmine": "~2.8.3",
	37	+ "@types/jasminewd2": "~2.0.2",
	38	+ "@types/node": "~6.0.60",
	39	+ "codelyzer": "^4.0.1",
	40	+ "jasmine-core": "~2.8.0",
	41	+ "jasmine-spec-reporter": "~4.2.1",
	42	+ "karma": "~2.0.0",
	43	+ "karma-chrome-launcher": "~2.2.0",
	44	+ "karma-coverage-istanbul-reporter": "^1.2.1",
	45	+ "karma-jasmine": "~1.1.0",
	46	+ "karma-jasmine-html-reporter": "^0.2.2",
	47	+ "protractor": "~5.1.2",
	48	+ "ts-node": "~4.1.0",
	49	+ "tslint": "~5.9.1",
	50	+ "typescript": "~2.5.3"
	51	+ }
	52	+}
...	...
	1	+++ a/protractor.conf.js
...	...	@@ -0,0 +1,28 @@
	1	+// Protractor configuration file, see link for more information
	2	+// https://github.com/angular/protractor/blob/master/lib/config.ts
	3	+
	4	+const { SpecReporter } = require('jasmine-spec-reporter');
	5	+
	6	+exports.config = {
	7	+ allScriptsTimeout: 11000,
	8	+ specs: [
	9	+ './e2e/*/.e2e-spec.ts'
	10	+ ],
	11	+ capabilities: {
	12	+ 'browserName': 'chrome'
	13	+ },
	14	+ directConnect: true,
	15	+ baseUrl: 'http://localhost:4200/',
	16	+ framework: 'jasmine',
	17	+ jasmineNodeOpts: {
	18	+ showColors: true,
	19	+ defaultTimeoutInterval: 30000,
	20	+ print: function() {}
	21	+ },
	22	+ onPrepare() {
	23	+ require('ts-node').register({
	24	+ project: 'e2e/tsconfig.e2e.json'
	25	+ });
	26	+ jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
	27	+ }
	28	+};
...	...
	1	+++ a/src/app/app.component.html
...	...	@@ -0,0 +1,6 @@
	1	+<nav>
	2	+ <a routerLink="/tinymce" routerLinkActive="active">tinymce</a>
	3	+ <a routerLink="/froala" routerLinkActive="active">froala</a>
	4	+</nav>
	5	+
	6	+ <router-outlet></router-outlet>
...	...
	1	+++ a/src/app/app.component.spec.ts
...	...	@@ -0,0 +1,27 @@
	1	+import { TestBed, async } from '@angular/core/testing';
	2	+import { AppComponent } from './app.component';
	3	+describe('AppComponent', () => {
	4	+ beforeEach(async(() => {
	5	+ TestBed.configureTestingModule({
	6	+ declarations: [
	7	+ AppComponent
	8	+ ],
	9	+ }).compileComponents();
	10	+ }));
	11	+ it('should create the app', async(() => {
	12	+ const fixture = TestBed.createComponent(AppComponent);
	13	+ const app = fixture.debugElement.componentInstance;
	14	+ expect(app).toBeTruthy();
	15	+ }));
	16	+ it(`should have as title 'app'`, async(() => {
	17	+ const fixture = TestBed.createComponent(AppComponent);
	18	+ const app = fixture.debugElement.componentInstance;
	19	+ expect(app.title).toEqual('app');
	20	+ }));
	21	+ it('should render title in a h1 tag', async(() => {
	22	+ const fixture = TestBed.createComponent(AppComponent);
	23	+ fixture.detectChanges();
	24	+ const compiled = fixture.debugElement.nativeElement;
	25	+ expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
	26	+ }));
	27	+});
...	...
	1	+++ a/src/app/app.component.ts
...	...	@@ -0,0 +1,10 @@
	1	+import { Component } from '@angular/core';
	2	+
	3	+@Component({
	4	+ selector: 'app-root',
	5	+ templateUrl: './app.component.html',
	6	+ styleUrls: ['./app.component.css']
	7	+})
	8	+export class AppComponent {
	9	+ title = 'app';
	10	+}
...	...