title: TinyMCE Not Working in Angular-Cli Project
body: <p>I need to implement a text editor in an angular 2 project I'm working on to allow users add posts according to their own customization. After research, I found <strong>TinyMCE</strong>. I have followed the docs, and setup as described, but the editor doesn't show up. I am using <strong>angular-cli</strong>. I have looked up at examples on <strong>Github</strong>, there seems to be nothing wrong with my code, but somehow, the editor won't show up. All I get is a blank textarea box.</p>
  
  <p>This is what I have done so far according to the docs. </p>
  
  <pre><code>npm install tinymce --save
  </code></pre>
  
  <p>This is my angular-cli.json file:</p>
  
  <pre><code>"scripts": [
          "../node_modules/jquery/dist/jquery.min.js",
          "../node_modules/semantic-ui/dist/semantic.min.js",
          "../node_modules/tinymce/tinymce.js",
          "../node_modules/tinymce/themes/modern/theme.js",
          "../node_modules/tinymce/plugins/link/plugin.js",
          "../node_modules/tinymce/plugins/paste/plugin.js",
          "../node_modules/tinymce/plugins/table/plugin.js",
          "scripts.js"
        ]
  </code></pre>
  
  <p>In my component called writer:</p>
  
  <pre><code>import {Component, OnInit, AfterViewInit, OnDestroy, Input, Output, EventEmitter} from "@angular/core";
  
  declare const tinymce: any;
  
  @Component({
    selector: 'app-writer',
    templateUrl: './writer.component.html',
    styleUrls: ['./writer.component.css']
  })
  export class WriterComponent implements AfterViewInit, OnDestroy, OnInit {
  
    @Input() elementId: string;
    @Input() text: string;
    @Output() onEditorKeyUp = new EventEmitter&lt;any&gt;();
  
    editor;
  
    constructor() {
    }
  
    ngOnInit() {
      debugger;
      if (!this.text) {
        this.text = '';
      }
    }
  
    ngAfterViewInit(): void {
      console.log('Initializing instance of tinymce!!');
      // debugger;
      tinymce.init({
        selector: '#' + this.elementId,
        height: 500,
        schema: 'html5',
        plugins: ['link', 'paste', 'table'],
        skin_url: 'assets/skins/lightgray',
        toolbar: 'bold italic underline strikethrough alignleft aligncenter alignright alignjustify ' +
        'styleselect bullist numlist outdent blockquote undo redo removeformat subscript superscript | code',
        setup: editor =&gt; {
          this.editor = editor;
          editor.on('init', ed =&gt; {
            ed.target.setContent(this.text);
            console.log('editor initialized');
          });
          editor.on('blur', () =&gt; {
            const content = editor.getContent();
            this.onEditorKeyUp.emit(content);
          });
        },
      });
    }
  
  
    ngOnDestroy(): void {
      tinymce.remove(this.editor);
    }
  
  }
  </code></pre>
  
  <p>I have copied the skins to the assets folder.</p>
  
  <p>And this is how I have called this component in the parent component:</p>
  
  <pre><code>&lt;app-writer [elementId]="editor" (onEditorKeyUp)="EditorKeyUpHandler($event)" [text]="hithere"&gt;&lt;/app-writer&gt;
  </code></pre>
  
  <p>However, all I get is a textbox. This is the same textarea you get with raw html.. I am not getting any error, I am not getting the out also.
  Thanks for your help...</p>