Provide better documentation for self loading TinyMCE over npm about tinymce-angular

[fyrkant]

What are you struggling with?

[tsiegleauq]

I struggle to comprehend what is necessary to provide a standalone version of TinyMCE for my Angular (7) project.

The point is that we cannot use TinyMCE-Cloud and therefore need to deliver TinyMCE ourselfs.
How to do that is not entirely clear.

What I did so far to got it working "somehow":

• installing TinyMCE:
  npm install --save

• In angular.json, add tinymce.min.js and all required plugins in the "scripts"-list (architect -> build -> options -> scripts)

  • To get karma tests working, provide tinymce.min.js (without plugins) in the scripts-lists of "test".

My scripts-list now looks like that:

"scripts": [
    "node_modules/tinymce/tinymce.min.js",
    "node_modules/tinymce/themes/modern/theme.js",
    "node_modules/tinymce/plugins/autolink/plugin.js",
    "node_modules/tinymce/plugins/charmap/plugin.js",
    "node_modules/tinymce/plugins/code/plugin.js",
    "node_modules/tinymce/plugins/colorpicker/plugin.js",
    "node_modules/tinymce/plugins/fullscreen/plugin.js",
    "node_modules/tinymce/plugins/image/plugin.js",
    "node_modules/tinymce/plugins/imagetools/plugin.js",
    "node_modules/tinymce/plugins/lists/plugin.js",
    "node_modules/tinymce/plugins/link/plugin.js",
    "node_modules/tinymce/plugins/paste/plugin.js",
    "node_modules/tinymce/plugins/preview/plugin.js",
    "node_modules/tinymce/plugins/searchreplace/plugin.js",
    "node_modules/tinymce/plugins/textcolor/plugin.js"
]

• the <editor> worked after that without using TinyMCE cloud, however it was complaining about missing styles and themes (Refused to apply style from (...) because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.)

  • adding the correct path to the desired themes and min.css in angular.json's "stlyes" list did not work
    • it was, however, working (or at least not throwing an error) in productive build
  • importing them in my global .scss did not work either
  • Hard copying did work

• what I ended up doing was: cp -r node_modules/tinymce/skins src/assets/tinymce/skins

• after that I provided a "global" object for my TinyMCE-settings with the following content:

public tinyMceSettings = {
    skin_url: '/assets/tinymce/skins/lightgray',
    inline: false,
    statusbar: false,
    browser_spellcheck: true,
    image_advtab: true,
    height: 320,
    plugins: `autolink charmap code colorpicker fullscreen image imagetools
        lists link paste preview searchreplace textcolor`,
};

I am not entirely happy that I need to really copy files from TinyMCE into the project but I could not figure out another solution.

Would be nice to see the documentation enhanced to get an idea how to get TinyMCE-angular and TinyMCE running.
If my step-by-stop-guide is fine, I can create a pull request to enhance the documentation.

[fyrkant]

I think the way you did it is the most straight forward way to do it, so a PR to the docs would be nice! I'm not sure it is possible to use the styles setting angular.json to get the skin files to work, so copying the files is probably the best way to do it.

[fabioloreggian]

I keep getting this error:

I am not sure what I am doing wrong, I have followed your steps precisely.

[tsiegleauq]

@fabioloreggian
looks odd. Is your Settings-object correct? Try to follow that part again.

• the <editor> worked after that without using TinyMCE cloud, however it was complaining about missing styles and themes (Refused to apply style from (...) because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.)

  • adding the correct path to the desired themes and min.css in angular.json's "stlyes" list did not work

    • it was, however, working (or at least not throwing an error) in productive build

  • importing them in my global .scss did not work either

  • Hard copying did work

• what I ended up doing was: cp -r node_modules/tinymce/skins src/assets/tinymce/skins

• after that I provided a "global" object for my TinyMCE-settings with the following content:

[romanKrds]

I keep getting this error:

I am not sure what I am doing wrong, I have followed your steps precisely.

I had the same error. I opened a network tab to see the initiator of this requests.
So styles were provided (editor was rendered properly) however tinymce.min.js script was requested them.

Copying and pasting "skins" folder from node_modules to "assets" didn't work for me.

To solve the issue I followed this guide:
https://github.com/tinymce/tinymce-angular#loading-tinymce-by-yourself
Except one thing, I'd to use square brackets notation to avoid TS "Property 'tinyMCE' does not exist on type 'Window'" compiler error
window['tinyMCE'].overrideDefaults({ base_url: '/tinymce/', suffix: '.min', });