Angular5 引入TinyMCE富文本编辑器

1.下载TinyMCE 富文本编辑器

        npm install --save tinymce       默认安装稳定版

2.引入js 把下载到node_modules\tinymce 下的源码复制到 assets文件夹下，再如下操作

3. 在在项目中的typing.d.ts中声明tinymce全局变量，不然会提示找不到tinymce

4.在component.ts中 加入如下代码

 editor;
  ngAfterViewInit() {
    if (this.editor) return;
    tinymce.init({
      selector: '#post_editor',
      language: 'zh_CN',
      plugins: [
        'advlist autolink lists link charmap print preview hr anchor pagebreak media',
        'searchreplace wordcount visualblocks visualchars code fullscreen ',
        'insertdatetime nonbreaking save table contextmenu directionality ',
        'paste textcolor colorpicker textpattern'
      ],
      toolbar1: ' fullscreen insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link ',
      toolbar2: 'print preview | forecolor backcolor media ',
      height:"480",
      image_advtab: true,
      menubar: true,
      setup: editor => {
        this.editor = editor;
        editor.on('keyup change', () => {
                const content = editor.getContent();
                // this.onEditorContentChange.emit(content);
                console.log("绑定按下事件",content);
              });
      }
    });

  }

5.html中加入如下代码

   id="post_editor"  
  name="content"  
  [(ngModel)]="doc"  
  class="form-control" rows="30"  
  >  
 

{{doc.length}}

6.tinymce的下载的源码和中文语言包，我一会放在评论上