use tinyMCE with angular 6 without apikey (free)

Question

I tried to install tinyMCE with angular 6. I am following the docs on https://www.tiny.cloud/docs/integrations/angular2/.

Everything OK but I must to have an apiKey to use the tinyMCE cloud.

I got the error : "This domain is not registered with TinyMCE Cloud. Start a free trial to discover our premium cloud services and pro support."

I want to use the self hosted version without apiKey.

So as explained on the doc https://www.tiny.cloud/docs/integrations/angular2/#loadingtinymcebyyourself we can hosting the tinymce.min.js to disable apiKey.

How to add tinymce.min.js properly with angular 6 ?

Answer 1

1) install tinymce for angular 2+ :

install tinymce angular npm module

npm install @tinymce/tinymce-angular

import EditorModule on app.module.ts

import { EditorModule } from '@tinymce/tinymce-angular';

add EditorModule to imports on app.module.ts

imports: [
...,
EditorModule
]

2) host the tinymce JS

install the tinymce npm module :

npm install tinymce --save

import styles on angular.json

"styles": [
  ...,
  "node_modules/tinymce/skins/lightgray/skin.min.css",
  "node_modules/tinymce/skins/lightgray/content.min.css",
  "node_modules/tinymce/skins/lightgray/content.inline.min.css"
]

import scripts on angular.json

"script": [
  ...,
  "node_modules/tinymce/tinymce.min.js",
  "node_modules/tinymce/themes/modern/theme.js"
]

3) use tinyMCE on HTML file

add this code to use :

<editor [(ngModel)]="dataModel"></editor>

Answer 2

The selected answer can be much more simplified following it here. Instead of adding the CSS files with their directories hard-coded, simply use this in angular.json instead:

 "assets": [
   { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
 ]

Answer 3

That component simply needs TinyMCE available before you try to load TinyMCE via the component. If TinyMCE is not there the component tries to load TinyMCE from the TinyMCE Cloud platform. The fact that its trying to get it from the Cloud tells me TinyMCE was not already there.

You have options for loading TinyMCE.

TinyMCE tag in head of your document (Easy)

If you have TinyMCE on your web server you can just use a script tag to load TinyMCE via your index.html page. All aspects of your app would then have access to TinyMCE as its loaded when the app first loads

Load TinyMCE via Module Loaders only when needed (Moderate Difficulty)

You can use a module loader to load TinyMCE in the component(s) that need TinyMCE. In theory you then only load TinyMCE when someone could need it but this approach is certainly more work to setup.

Documentation: https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/

Which of these should I use? Neither of these is the "right" or "wrong" approach - they are both viable and depending on your needs either can work just fine.