TinyMCE Not Working in Angular-Cli Project

Question

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 TinyMCE. I have followed the docs, and setup as described, but the editor doesn't show up. I am using angular-cli. I have looked up at examples on Github, 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.

This is what I have done so far according to the docs.

npm install tinymce --save

This is my angular-cli.json file:

"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"
      ]

In my component called writer:

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<any>();

  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 => {
        this.editor = editor;
        editor.on('init', ed => {
          ed.target.setContent(this.text);
          console.log('editor initialized');
        });
        editor.on('blur', () => {
          const content = editor.getContent();
          this.onEditorKeyUp.emit(content);
        });
      },
    });
  }


  ngOnDestroy(): void {
    tinymce.remove(this.editor);
  }

}

I have copied the skins to the assets folder.

And this is how I have called this component in the parent component:

<app-writer [elementId]="editor" (onEditorKeyUp)="EditorKeyUpHandler($event)" [text]="hithere"></app-writer>

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...

Have you followed all the steps in here? https://www.tinymce.com/docs/integrations/angular2/ I ask cause you're delcaring the tinymce variable inside the controller rather than inside `typings.d.ts` — Baruch, Jan 08 '17 at 06:41
@Baruch Please take a look at it again. It says: **Even though the setup above will make the tinymce global available TypeScript will complain that it "cannot find name 'tinymce'", so you will have to add something like this either directly into the file that calls on tinymce or to the typings.d.ts file located in the src directory:** — Clinton Yeboah, Jan 08 '17 at 13:15

score 0 · Answer 1 · answered Jan 15 '17 at 16:56

You've done the implementation properly as it seems. You don't need the debugger in ngOnInit() since it's just for testing purposes. (As I knew)

Make sure you pass some unique value for [elementId]="editor"

And then try this out.

Parse whatever the text you want to show in the WYSIWYG in [text]="" (This may be the data from the backend)

Your code -

setup: editor => {
    this.editor = editor;
    editor.on('init', ed => {
      ed.target.setContent(this.text);
      console.log('editor initialized');
    });
    editor.on('blur', () => {
      const content = editor.getContent();
      this.onEditorKeyUp.emit(content);
    });
  }

Change this as -

setup: editor => {
    this.editor = editor;
    editor.on('keyup', () => {
      const content = editor.getContent();
      this.onEditorKeyup.emit(content);
    });
  }

writer.component.html -

<textarea id="{{elementId}}"> {{text}} </textarea>

From the component, you're calling the app-writer you can track the changes through a function like this...

EditorKeyUpHandler(event) {
    console.log(event);
    // ......
}

This is how I managed to get it done after going through their docs.

Ref - https://www.tinymce.com/docs/integrations/angular2/

score 0 · Answer 2 · edited Aug 17 '17 at 04:18

0

I had this problem in angular 2. In my case I had

[elementId]="my-editor-id"   (onEditorKeyup)="onBodyTextEditorKeyUp($event)"

Then I changed to

[elementId]="'my-editor-id'"   (onEditorKeyup)="onBodyTextEditorKeyUp($event)"

As You see, I only changed:

"my-editor-id" ---> "'my-editor-id'"

And it is working fine!!!

edited Aug 17 '17 at 04:18

Stephen Rauch

47,830
31
106
135

answered Aug 17 '17 at 03:56

luis urdaneta

91
1
4

TinyMCE Not Working in Angular-Cli Project

2 Answers2

Linked