1. 准备工作

1. 确保已经安装了node 6.9以上版本
2. 确定npm以安装
3. 确定已经安装了@Angular/cli
4. 可以使用以下命令确认：

xxx:~ xxx$ node -v
v7.10.0
xxx:~ xxx$ npm -v
4.2.0
xxx:~ xxx$ ng v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.1.1
node: 7.10.0
os: darwin x64

若以上都完成就可以开始了。

2. 开始

1. 新建一个demo：

ng new NgTiny

2. 安装TinyMCE

cd NgTiny
npm install tinymce@4.5.3 --save

3. 将TinyMCE的皮肤文件移动到assets文件夹。
   默认TinyMCE的皮肤文件是在node_modules/tinymce/skins目录下，需要手动移动到src/assets/skins目录下才可以正常使用。懒的话直接copy下面命令。

// For Macos and Linux, use:
cp -r node_modules/tinymce/skins src/assets/skins
// For Windows, use:
xcopy /I /E node_modules/tinymce/skins src/assets/skins

4. 新建一个本地Angular TinyEditComponent

ng g component TinyEditor

5. 可以正式开工了。
   定义一个变量，后面我们用它来引用tinyMce。
   declare var tinymce: any;
   哦。当然是在你在组件中，比如：tiny-editor.component.ts中干这些事。
   还需要下面这些，自己对照有没有，没有copy过去。

import {
  Component,
  AfterViewInit,
  EventEmitter,
  OnDestroy,
  Input,
  Output
} from '@angular/core';
import 'tinymce';
import 'tinymce/themes/modern';
import 'tinymce/plugins/table';
import 'tinymce/plugins/link';
declare var tinymce: any;
@Component({
  selector: 'app-tiny-editor',
  template: `<textarea id="{{elementId}}"></textarea>`  // 最好不要这么干，其实无所谓了，因为 这就是个空架子
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: String;
  @Output() onEditorContentChange = new EventEmitter();
  editor;
  ngAfterViewInit() {
    tinymce.init({
      selector: '#' + this.elementId,       // id 属性绑定在父组件上
      plugins: ['link', 'table'],
      skin_url: 'assets/skins/lightgray',   // 这里是刚才移动的主题文件
      setup: editor => {
        this.editor = editor;
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.onEditorContentChange.emit(content);   // 通过keyup change事件将textarea 发送到父组件，可以自定义事件
        });
      }
    });
  }
  ngOnDestroy() {
    tinymce.remove(this.editor);        // 组件移除时销毁编辑器
  }
}

6. 这时候打开你的组件：
   
   不用惊讶，它就是这个样子，所以，需要在父组件中显示它：

            <app-tiny-editor
              [elementId]="'my-editor'"
              (onEditorContentChange)="keyupHandler($event)">
            </app-tiny-editor>

ok，现在可以看到它完整的样子了：

6. 导入编辑器只是第第一步，通常我们需要对它进行一些操作，比如获取内容：
编辑器本身提供了输出属性，上面的keyupHandler($event)">就是取得编辑器中的输入内容。
所以我们就拿到的输入内容:

  public keyupHandler(event: any) {
    console.log(event);    // 简单将内容打印出来
  }

当然，也可以进行其他很多操作，更多请参考官方文档：官方文档