Bundling TinyMCE in Angular

This guide shows how to integrate TinyMCE in an Angular application using the TinyMCE Angular component.

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.
```
ng new --defaults --skip-git tinymce-angular-demo
```
Go to the newly project directory and install tinymce and @tinymce/tinymce-angular.
```
cd tinymce-angular-demo && npm install tinymce @tinymce/tinymce-angular
```

Create src/app/editor.component.ts.

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

// Ensure you import TinyMCE to register the global variable required by other components
import 'tinymce/tinymce';
// DOM model
import 'tinymce/models/dom/model';
// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// Import plugins
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/code';
import 'tinymce/plugins/help';
// Include resources that a plugin lazy-loads at the run-time
import 'tinymce/plugins/help/js/i18n/keynav/en.js';
import 'tinymce/plugins/wordcount';

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content.js';
import 'tinymce/skins/ui/oxide/content.js';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [EditorComponent],
  template: `
    <editor
      [init]="init"
      licenseKey="gpl"
    />
  `
})
export class MyEditorComponent {
  init: EditorComponent['init'] = {
    height: 500,
    plugins: 'advlist autolink lists link image table code help wordcount',
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help'
  };
}

Open app.component.ts and import MyEditorComponent.

import { Component } from '@angular/core';
import { MyEditorComponent } from './editor.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MyEditorComponent],
  template: `
    <h1>TinyMCE Angular Demo</h1>
    <app-editor />
  `
})
export class AppComponent {}

Run the Angular 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.