TinyMCE (Angular) missing skins and themes

Question

following the official docs, I am working to host the plugins etc myself, i.e. following the step-by-step guide, which involves:

1) npm install --save tinymce

2) add lines to angular.json

"scripts": [
  "node_modules/tinymce/tinymce.min.js",
  "node_modules/tinymce/themes/modern/theme.js",
  "node_modules/tinymce/plugins/fullscreen/plugin.js",
]

3) run cp -r node_modules/tinymce/skins src/assets/tinymce/skins

4) configure tiny mce

public tinyMceSettings = {
  skin_url: '/assets/tinymce/skins/lightgray',
  inline: false,
  statusbar: false,
  browser_spellcheck: true,
  height: 320,
  plugins: 'fullscreen',
};

but here is the problem

the tinymce node_module directory does not contain, skins/lightgray, nor does it contain themes/modern.

So I replaced the name of the theme with a theme that I could see existed, but now it is giving out about missing the lightgray skin.

My question is, why are the docs inconsistent with the actual experience?

Can anyone help out in the first time set up of tinymce (self-hosting).?

But why are there themes and skins missing? Is there some special way to install these.

Michael Fromin Michael Fromin · Accepted Answer · 2019-05-14T13:50:39

The themes and skins in TinyMCE 5 are named differently from those in TinyMCE 4 so the directions you reference are correct for TinyMCE 4 but not TinyMCE 5.

If you look at the theme and skin folders in TinyMCE 5 (which you appear to have done) you can find the names of the appropriate files for TinyMCE 5. I will ask the folks that manage that Angular wrapper code to update the README appropriately with examples for both TinyMCE 4 and TinyMCE 5.

For more details on module loaders and TinyMCE 5 please see this documentation page: https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/

TinyMCE (Angular) missing skins and themes

1 Answers