Bundling TinyMCE with an Angular application

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

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/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.

For information on configuring premium plugins when bundling, see: Using premium plugins.

Using a text editor, create src/app/editor.component.ts and set the contents to:

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';
import 'tinymce/plugins/help/js/en.js';
import 'tinymce/plugins/wordcount';

// Import premium plugins from NPM
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
import 'tinymce-premium/plugins/licensekeymanager';

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

Using a text editor, open src/app/app.component.ts and update it to use the editor component:

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 ng serve to start a dev server
```
ng serve
```
Build the application for production:
```
ng build
```
This command creates an optimized production bundle in the dist directory.
If premium plugins are included, update the licenseKey option in the editor component and include your License Key.

Next Steps

For information on bundling, see: Introduction to bundling TinyMCE
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.
For a complete example, see: the Angular bundling example repository.