Lazy-loading TinyMCE from a .zip package in Angular

This guide shows how to self-host and lazy-load TinyMCE from a .zip package into an Angular application using the TinyMCE Angular component.

The steps below use standalone components. If using Angular Modules, see Angular Modules.

Prerequisites

This procedure requires Node.js (and NPM).

Procedure

From a terminal or command prompt, install the Angular CLI Tool globally.
```
npm install -g @angular/cli
```
Create a new Angular project named tinymce-angular-demo using default settings and without Git initialization.
```
ng new --defaults --skip-git tinymce-angular-demo
```

Move into the project directory and install tinymce-angular.

cd tinymce-angular-demo && npm install @tinymce/tinymce-angular

Update the root component app.component.ts to import EditorComponent component.

import { Component } from '@angular/core';
import { EditorComponent } from '@tinymce/tinymce-angular';

@Component({
  selector: 'app-root',
  imports: [EditorComponent],
  template: `
  <h1>TinyMCE 8 Angular Demo</h1>
  <editor
    [init]="init"
    licenseKey="gpl"
  />
  `
})
export class AppComponent {
  init: EditorComponent['init'] = {
    plugins: 'lists link image table code help wordcount'
  };
}

Unzip the content of the tinymce/js folder from the TinyMCE zip into the src folder.

There are two options for including TinyMCE into an application:

Lazy load TinyMCE using the provided TINYMCE_SCRIPT_SRC dependency provider.

import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';

@Component({
  /* ... */
  standalone: true,
  imports: [EditorComponent],
  providers: [
    { provide: TINYMCE_SCRIPT_SRC, useValue: '/tinymce/tinymce.min.js' }
  ]
})

Add TinyMCE to the global scripts tag via angular.json.

"scripts": [
  "<path_to_source_tinymce>/tinymce.min.js"
]

Then update angular.json to include TinyMCE and other components as assets. This will make them available to the application as static assets.
```
"assets": [
  {
    "glob": "**/*",
    "input": "<path_to_source_tinymce>/tinymce",
    "output": "/tinymce"
  }
]
```

Update the base_url and suffix options to configurate the location of other components like skins, icons, plugins, etc.

export class AppComponent {
  /* ... */
  init: EditorComponent['init'] = {
    /* ... */
    base_url: '/tinymce', // Root for resources
    suffix: '.min'        // Suffix to use when loading resources
  };
}

Run the Angular a development server
```
ng serve
```

Other resources

For examples of the TinyMCE integration, see: the tinymce-angular storybook.
For guides on integrating TinyMCE premium plugins, see: Using premium plugins.
For information on customizing:
- TinyMCE integration, see: Angular framework Technical Reference.
- TinyMCE, see: Basic setup.
- The Angular application, see: the Angular documentation.