Angular 4 中 TinyMCE 的安装

本文基于官方文档编写。

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 [email protected] --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: ``  // 最好不要这么干，其实无所谓了，因为 这就是个空架子
   })
   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. 这时候打开你的组件：

   
   
   

   这是你的富文本编辑器
   
   

   不用惊讶，它就是这个样子，所以，需要在父组件中显示它：

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

还是你的富文本编辑器

2. 开始使用

导入编辑器只是第第一步，通常我们需要对它进行一些操作，比如获取内容：
编辑器本身提供了输出属性，上面的keyupHandler($event)">就是取得编辑器中的输入内容。
所以我们就拿到的输入内容：
ts public keyupHandler(event: any) { console.log(event); // 简单将内容打印出来 }
当然，也可以进行其他很多操作，更多请参考官方文档：官方文档