How to set TinyMCE-Angular init config in angular5 component as opposed to the HTML?

Question

I've installed the tinymce angular package which I can get working fine:

https://www.npmjs.com/package/@tinymce/tinymce-angular

But I wish to change the init values within the component so I can load the skins link etc from a config per environment instead of hard coding this in the html.

I've tried:

import tinymce from 'tinymce/tinymce';

and using:

tinymce.init({
    skins: '/assets/skins'
});

However this complains to do an npm install @types/tinymce (which I've already done but it's not seeming to recognise this package)

Can anyone suggest what I am doing wrong? The documentation isn't great and I can't seem to find any help online after endless searching.

Note: I'm copying the skins from /node_modules/tinymce/skins into /assets/skins, so I just want a way of being able to point to this location for the editor to load them

Answer 1

After doing some further investigation I found the answer to this question myself, so for clarity in case anyone else is struggling with a similar issue, here is how I solved it:

I first followed the instructions given here: https://github.com/tinymce/tinymce-angular

(Importing the module, and adding the editor to the component.html file)

Then within the component.ts I set the baseUrl and altered the init:

import 'tinymce';
declare var tinymce: any;

public ngOnInit (): void {
    this.setupTinyMce();
}

private setupTinyMce (): void {
    tinymce.baseURL = 'assets';
    tinymce.init({
        skin_url: '/skins' // Or loaded from your environments config
    });
}

You also need to copy the 3 Folders "plugins", "skins", "themes" from "node_modules/tinymce" to the "assets" folder (or use webpack or equivalent to do so for you)