本文基于官方文檔編寫钦椭。

1. 準(zhǔn)備工作

1. 確定已經(jīng)安裝了node 6.9以上版本
2. 確定npm已安裝
3. 確定已經(jīng)安裝了@Angular/cli
4. 可以使用以下命令確認(rèn)：

   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文件夾来氧。
   默認(rèn)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
   

復(fù)制完成是這樣的

4. 新建一個本地Angular TinyEditComponent

   ng g component TinyEditor
   

5. 可以正式開工了屁柏。
   定義一個變量，后面我們用它來引用tinyMce前联。
   declare var tinymce: any;
   哦功戚。當(dāng)然是在你在組件中，比如：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 發(fā)送到父組件，可以自定義事件
           });
         }
       });
     }
   
     ngOnDestroy() {
       tinymce.remove(this.editor);        // 組件移除時銷毀編輯器
     }
   }
   

6. 這時候打開你的組件：

   
   
   這是你的富文本編輯器
   
   

   不用驚訝灯萍，它就是這個樣子轧铁，所以，需要在父組件中顯示它：

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

ok旦棉，現(xiàn)在可以看到它完整的樣子了：

還是你的富文本編輯器

2. 開始使用

導(dǎo)入編輯器只是第第一步齿风，通常我們需要對它進(jìn)行一些操作，比如獲取內(nèi)容：
編輯器本身提供了輸出屬性绑洛，上面的keyupHandler($event)">就是取得編輯器中的輸入內(nèi)容救斑。
所以我們就拿到的輸入內(nèi)容：
ts public keyupHandler(event: any) { console.log(event); // 簡單將內(nèi)容打印出來 }
當(dāng)然，也可以進(jìn)行其他很多操作真屯，更多請參考官方文檔：官方文檔