TinyMCE Angular 5 cannot find themes/modern/theme.js

Question

So I am trying to use TinyMCE for an editor within an application. and I have correctly installed the npm module, copied the skin into my assets folder and correctly added the scripts to my angular-cli.json. Here is what I have done with my EditorComponent:

import { Component, OnInit, AfterViewInit, EventEmitter, Input, Output } from '@angular/core';

import 'tinymce';

declare var tinymce: any;

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.scss']
})
export class EditorComponent implements OnInit, AfterViewInit {

  @Input() elementId: string;
  @Output() onEditorKeyup = new EventEmitter<any>();

  editor: any;

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    tinymce.init({
      selector: '#' + this.elementId,
      plugins: ['link', 'paste', 'table'],
      skin_url: 'assets/skins/lightgray',
      setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
          const content = editor.getContent();
          this.onEditorKeyup.emit(content);
        });
      } 
    });
  }

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

}

and here is the markup for the EditorComponent:

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

and now being used in a parent component:

<app-editor [elementId]="'editor'" (onEditorKeyup)="keyupHandlerFunction($event)"></app-editor>

I have followed this link from their website: https://www.tinymce.com/docs/integrations/angular2/

in addition to a few other posts showing how to declare tinymce in the component.

Here is the angular-cli.json app[0].scripts as well:

"scripts": [
        "../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"
      ]

I seem to be getting this error in my console which is thrown by tinymce.js:

But I cannot find a replicated issue anywhere out there, and the console log gives no clue to where in my code this issue is arising. My editor component also just shows up completely blank in the parent component. I appreciate any and all help. Thanks in advance.

Answer 1

I had a very similar issue, and I discovered that somehow TinyMCE changed the location of where it was seeking the asset archives from

"/tinymce/skins/",
"/tinymce/themes/",
"/tinymce/plugins/",

to

"/skins/",
"/themes/",
"/plugins/",

Because of this the output in the assets config in the Angular.json file was wrong and I had to fix it from:

{ "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/tinymce/skins/" },
{ "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/tinymce/themes/" },
{ "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/tinymce/plugins/" }

To:

{ "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/skins/" },
{ "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/themes/" },
{ "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/plugins/" }

Unfortunately, I have not found out what caused the change in behaviour but I do believe this is a better answer than manually importing the scripts or copying them inside your application folder.

Answer 2

I had the same error and got it working in Angular 5:

Copy the 3 Folders "plugins", "skins", "themes" from the "node_modules/tinymce" folder into your apps "assets" folder.

Also set the baseURL for tinymce to your assets folder afterwards

  ngAfterViewInit() {
    tinymce.baseURL = 'assets';
    tinymce.init({
      selector: '#' + this.elementId,
      plugins: ['link', 'paste', 'table'],
      skin_url: 'assets/skins/lightgray',
      setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
          const content = editor.getContent();
          this.onEditorKeyup.emit(content);
        });
      },
    });
  }