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/" }
 ]