Using TinyMCE from the Tiny Cloud CDN 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-angular package.
```
npm install @tinymce/tinymce-angular
```

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"
    apiKey="no-api-key"
  />
  `
})
export class AppComponent {
  init: EditorComponent['init'] = {
    plugins: 'lists link image table code help wordcount'
  };
}

Update the apiKey option in the editor element to include your Tiny Cloud API key.
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 } from '@tinymce/tinymce-angular';

@NgModule({
  /* ... */
  imports: [
    EditorModule
  ],
  /* ... */
})
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.