Using the TinyMCE package with the Angular framework

The Official TinyMCE Angular component integrates TinyMCE into Angular projects. This procedure creates a basic Angular application containing a TinyMCE editor.

This procedure uses standalone components. If using Angular Modules, see Angular Modules.

For examples of the TinyMCE Angular integration, visit the tinymce-angular storybook.

Prerequisites

This procedure requires Node.js (and npm).

Procedure

On a command line or command prompt, install the Angular CLI Tool package.
```
npm install -g @angular/cli
```
Create a new Angular project named tinymce-angular-demo.
```
ng new --defaults --skip-git tinymce-angular-demo
```
Change into the newly created directory.
```
cd tinymce-angular-demo
```
Install the tinymce and tinymce-angular packages.
```
npm install tinymce @tinymce/tinymce-angular
```
(Optional) For premium plugins, install the tinymce-premium package:
```
npm install tinymce-premium@^8.3
```
For more information, see: Installing premium plugins.

Using a text editor, open /path/to/tinymce-angular-demo/src/app/app.component.ts and replace the contents with:

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'
  };
}

Using a text editor, open angular.json and add TinyMCE to the assets property.

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

Load TinyMCE.

To load TinyMCE when the editor is initialized (also known as lazy loading), add a dependency provider to the component using the TINYMCE_SCRIPT_SRC token.

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

When using TINYMCE_SCRIPT_SRC to lazy load TinyMCE, you can not import premium plugins directly. This will trigger a tinymce not defined error in your application because the plugins need to access tinymce global variable which doesn’t exist at that time.

To load TinyMCE when the page or application is loaded:

Open angular.json and add TinyMCE to the global scripts tag.
```
"scripts": [
  "node_modules/tinymce/tinymce.min.js"
]
```

Update the editor configuration to include the base_url and suffix options.

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

Run ng serve to start a dev server
```
ng serve
```

Angular Modules

EditorModule is available to import from @tinymce/tinymce-angular. Which should be included in your my.module.ts file.

import { NgModule } from '@angular/core';
import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';

@NgModule({
  /* ... */
  imports: [
    EditorModule
  ],
  providers: [
    // If you're self hosting and lazy loading TinyMCE from node_modules:
    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
  ],
  /* ... */
})
export class MyModule {}

Next Steps

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