---
title: "Angular 5+ integration"
description: "Using TinyMCE together with Angular with the @tinymce/tinymce-angular component"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/angular-pm/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/angular-pm/index.md"
version: "5"
last_updated: "2024-04-09T10:06:54Z"
tokens: 4591
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/angular-pm/).
# Angular 5+ integration

## TinyMCE Angular integration quick start guide

The [Official TinyMCE Angular component](https://github.com/tinymce/tinymce-angular) integrates TinyMCE into Angular projects.
This procedure creates a [basic Angular application](https://angular.io/guide/setup-local) containing a TinyMCE editor based on our [Basic TinyMCE example](../basic-example/).

For examples of the TinyMCE Angular integration, visit [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/).

### Prerequisites

This procedure requires:

- [Node.js (and npm)](https://nodejs.org/).
- Access to `tinymce.min.js` on either:

  - [Tiny Cloud](../editor-and-features/).
  - TinyMCE Self-hosted. See:

    - [Installing TinyMCE - Package Managers](../installation/#packagemanagerinstalloptions).
    - [Installing TinyMCE - Self-Hosted Download / Install](../installation/#self-hostedinstall).

### Procedure

1. On a command line or command prompt, install the [Angular CLI Tool](https://angular.io/cli) package.

```sh
$ npm install -g @angular/cli
```
2. Create a new Angular project named `tinymce-angular-demo`.

```
$ ng new --defaults --skip-git tinymce-angular-demo
```
3. Change into the newly created directory.

```sh
$ cd tinymce-angular-demo
```
4. Install the `tinymce-angular` package and save it to your `package.json` with `--save`.

```sh
$ npm install --save @tinymce/tinymce-angular
```
5. Using a text editor, open `/path/to/tinymce-angular-demo/src/app/app.module.ts` and replace the contents with:

```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EditorModule } from '@tinymce/tinymce-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    EditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
6. Using a text editor, open `/path/to/tinymce-angular-demo/src/app/app.component.html` and replace the contents with:

```html
<h1>TinyMCE 5 Angular Demo</h1>
<editor
  [init]="{
    height: 500,
    menubar: false,
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
    ],
    toolbar:
      'undo redo | formatselect | bold italic backcolor | \
      alignleft aligncenter alignright alignjustify | \
      bullist numlist outdent indent | removeformat | help'
  }"
></editor>
```
This TinyMCE editor configuration should replicate the example on the [Basic example page](../basic-example/).
7. Provide access to TinyMCE using either Tiny Cloud or by self-hosting TinyMCE.

  - **Tiny Cloud**

Include the `apiKey` option in the editor element and include your [Tiny Cloud API key](/auth/signup/).

Such as:

```html
<editor apiKey="your-api-key" [init]={ /* your other settings */ } ></editor>
```
  - **TinyMCE Self-hosted**

TinyMCE can be self-hosted by: including TinyMCE within the application, deploying TinyMCE independent of the Angular application, or bundling TinyMCE with the Angular application.

    - **Including TinyMCE within the Application**

To load TinyMCE and TinyMCE-Angular in a project managed by the [Angular CLI Tool](https://angular.io/cli):

      1. Install the `tinymce` package and save it to your `package.json` with `--save`.

```sh
$ npm install --save tinymce
```
      2. Using a text editor; open `angular.json` and add TinyMCE to the `assets` property.

```json
"assets": [
  { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
]
```
      3. Load TinyMCE.

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

> **Note:** Lazy loading is available for tinymce-angular 3.5.0 or later.

```js
import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
  /* ... */
  @NgModule({
    /* ... */
    imports: [
      EditorModule
    ],
    providers: [
      { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
    ]
  })
```
        - To load TinyMCE when the page or application is loaded, open `angular.json` and add TinyMCE to the *global scripts* tag.

```json
"scripts": [
    "node_modules/tinymce/tinymce.min.js"
  ]
```
Update the editor configuration to include the `base_url` and `suffix` options.

```html
<editor [init]="{
    base_url: '/tinymce', // Root for resources
    suffix: '.min'        // Suffix to use when loading resources
  }"></editor>
```
    - **Deploy TinyMCE independent of the Angular application**

To use an independent deployment of TinyMCE, add a script to either the `<head>` or the end of the `<body>` of the HTML file, such as:

```html
<script src="/path/to/tinymce.min.js"></script>
```
To use an independent deployment of TinyMCE with the create a Angular application, add the script to `/path/to/tinymce-angular-demo/src/app/app.component.html`.

For information on self-hosting TinyMCE, see: [Installing TinyMCE](../installation/).
    - **Bundling TinyMCE with the Angular application using a module loader**

To bundle TinyMCE using a module loader (such as Webpack and Browserify), see: [Usage with module loaders](../usage-with-module-loaders/).
8. Test the application using the Angular development server.

  - To start the development server, navigate to the `tinymce-angular-demo` directory and run:

```sh
ng serve --open
```
  - To stop the development server, select on the command line or command prompt and press *Ctrl+C*.

### Deploying the application to a HTTP server.

The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: [Angular Docs - Building and serving Angular apps](https://angular.io/guide/build) or [Angular Docs - Deployment](https://angular.io/guide/deployment).

To deploy the application to a local HTTP Server:

1. Navigate to the `tinymce-angular-demo` directory and run:

```sh
ng build
```
2. Copy the contents of the `tinymce-angular-demo/dist` directory to the root directory of the web server.

The application has now been deployed on the web server.

> **Note:** Additional configuration is required to deploy the application outside the web server root directory, such as http://localhost:<port>/my_angular_application.

### Next Steps

- For examples of the TinyMCE integration, see: [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/).
- For information on customizing:

  - TinyMCE, see: [Basic setup](../basic-setup/).
  - The Angular application, see: [the Angular documentation](https://angular.io/docs).

## TinyMCE Angular technical reference

**Covered in this section:**

- [Supported Angular versions](#supportedangularversions)
- [Installing the TinyMCE Angular integration using NPM](#installingthetinymceangularintegrationusingnpm)
- [Using the TinyMCE Angular integration](#usingthetinymceangularintegration)
- [Configuring the editor](#configuringtheeditor)

  - [`apiKey`](#apikey)
  - [`cloudChannel`](#cloudchannel)
  - [`disabled`](#disabled)
  - [`id`](#id)
  - [`init`](#init)
  - [`initialValue`](#initialvalue)
  - [`inline`](#inline)
  - [`outputFormat`](#outputformat)
  - [`plugins`](#plugins)
  - [`tagName`](#tagname)
  - [`toolbar`](#toolbar)
- [Using the `ngModel` directive](#usingthengmodeldirective)

  - [`modelEvents`](#modelevents)
- [Using with reactive forms](#usingwithreactiveforms)
- [Event binding](#eventbinding)

  - [Supported browser events](#supportedbrowserevents)
  - [Supported TinyMCE events](#supportedtinymceevents)
  - [`allowedEvents`](#allowedevents)
  - [`ignoreEvents`](#ignoreevents)

### Supported Angular versions

The following table shows the supported versions of Angular and the required version of the `tinymce-angular` integration package.

| Angular Version | `tinymce-angular` version |
| --- | --- |
| 9+ | 4.x |
| 5 to 8 | 3.x |
| 4 or older | Not Supported |

### Installing the TinyMCE Angular integration using NPM

To install the `tinymce-angular` package and save it to your `package.json`.

```sh
$ npm install --save @tinymce/tinymce-angular
```

### Using the TinyMCE Angular integration

1. Import the `EditorModule` from the npm package using:

```js
import { EditorModule } from '@tinymce/tinymce-angular';
```
Add the `EditorModule` to `@NgModule({imports})`:

```js
// This might look different depending on how you have set up your app
// but the important part is the imports array
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    EditorModule // <- Important part
  ],
  providers: [],
  bootstrap: [AppComponent]
})
```
2. Add the editor to the Angular application template, such as:

```html
<editor apiKey="test" [init]="{plugins: 'link'}"></editor>
```

### Configuring the editor

The editor accepts the following properties:

```html
<editor
  apiKey="no-api-key"
  cloudChannel="5"
  [disabled]="false"
  id=""
  [init]="{  }"
  initialValue=""
  [inline]="false"
  plugins=""
  tagName="div"
  toolbar=""
></editor>
```
None of the configuration properties are **required** for `tinymce-angular` to work. Specify a Tiny Cloud API key using `apiKey` to remove the `This domain is not registered...` warning message.

#### `apiKey`

Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor.

To register for a Tiny Cloud API key, visit the [Tiny Account sign-up page](/auth/signup/). To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the [Tiny Account Dashboard](/my-account).

**Default value:** `no-api-key`

**Type:** String

##### Example: Using `apiKey`

```html
<editor
  apiKey="your-api-key">
</editor>
```

#### `cloudChannel`

**Default value:** `5`

**Possible values:** `5-stable`, `5-testing`, `5-dev`

Changes the TinyMCE build used for the editor to one of the following Tiny Cloud channels:

- `5-stable` (**Default**): The current enterprise release of TinyMCE.
- `5-testing`: The current release candidate for the next enterprise release of TinyMCE.
- `5-dev`: The nightly-build version of TinyMCE.

Such as:

```html
<editor
  apiKey="your-api-key"
  cloudChannel="5-dev">
</editor>
```
For information TinyMCE development channels, see: [Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases](../editor-plugin-version/#55-testingand5-devreleasechannels).

#### `disabled`

The `disabled` property can dynamically switch the editor between a "disabled" (read-only) mode (`true`) and the standard editable mode (`false`).

**Default value:** `false`

**Possible values:** `true`, `false`

##### Example: Using `disabled`

```html
<editor
  [disabled]="true"
></editor>
```

#### `id`

An id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method. Defaults to an automatically generated [UUID](https://tools.ietf.org/html/rfc4122).

**Default value:** Automatically generated [UUID](https://tools.ietf.org/html/rfc4122).

**Type:** String

##### Example: Using `id`

```html
<editor
  id="uuid"
></editor>
```

#### `init`

Object sent to the `tinymce.init` method used to initialize the editor.

For information on the TinyMCE selector (`tinymce.init`), see: [Basic setup](../basic-setup/).

**Default value:** { }

**Type:** Object

##### Example: Using `init`

```html
<editor
  [init]="{
    plugins: [
      'lists link image paste help wordcount'
    ],
    toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
  }"
></editor>
```

#### `initialValue`

Initial content of the editor when the editor is initialized.

**Default value:** `' '`

**Type:** String

##### Example: Using `initialValue`

```html
<editor
  initialValue="Once upon a time...">
</editor>
```

#### `inline`

Used to set the editor to inline mode. Using `<editor [inline]="true"></editor>` is the same as setting `{inline: true}` in the TinyMCE selector (`tinymce.init`).

For information on inline mode, see: [User interface options - `inline`](../editor-appearance/#inline) and [Setup inline editing mode](../use-tinymce-inline/).

**Default value:** `false`

**Possible values:** `true`, `false`

##### Example: Using `inline`

```html
<editor
  [inline]="true"
></editor>
```

#### `plugins`

Used to include plugins for the editor. Using `<editor plugins="lists code"></editor>` is the same as setting `{plugins: 'lists code'}` in the TinyMCE selector (`tinymce.init`).

For information on adding plugins to TinyMCE, see: [Add plugins to TinyMCE](../plugins/).

**Type:** String or Array

##### Example: Using `plugins`

```html
<editor
  plugins="lists code">
</editor>
```

#### `outputFormat`

Used to specify the format of the content emitted by the `tinymce-angular` component when used in conjunction with forms or plain data bindings.

**Type:** String

**Default value:** `html`

**Possible values:** `html`, `text`

##### Example: Using `outputFormat`

```html
<editor
  outputFormat="text">
</editor>
```

#### `tagName`

Only valid when [`<editor [inline]="true"></editor>`](#inline). Used to define the HTML element for the editor in inline mode.

**Default value:** `div`

**Type:** String

##### Example: Using `tagName`

```html
<editor
  [inline]="true"
  tagName="my-custom-tag"
></editor>
```

#### `toolbar`

Used to set the toolbar for the editor. Using `<editor toolbar="bold italic"></editor>` is the same as setting `{toolbar: 'bold italic'}` in the TinyMCE selector (`tinymce.init`).

For information setting the toolbar for TinyMCE, see: [User interface options - toolbar](../editor-appearance/#toolbar).

**Possible values:** See [Toolbar Buttons Available for TinyMCE](../available-toolbar-buttons/).

**Type:** String

##### Example: Using `toolbar`

```html
<editor
  plugins="code"
  toolbar="bold italic underline code"
></editor>
```

### Using the `ngModel` directive

The `ngModel` directive can be added to use the editor in a form:

```html
<editor [(ngModel)]="dataModel"></editor>
```
For information on using `NgModel`, see: [Angular documentation - NgModel](https://angular.io/api/forms/NgModel).

#### `modelEvents`

> **Note:** This property requires `tinymce-angular` 4.0.0 or newer
Used to specify the events that trigger the `NgModelChange` to emit.

**Default value:** `"change input undo redo"`.

**Possible value:** A space separated list of TinyMCE editor events.

**Type** String

##### Example: Using `modelEvents`

```html
<editor
  modelEvents="change input nodechange undo redo"
></editor>
```

### Using with reactive forms

To use TinyMCE Angular component with reactive forms:

1. Include the `<editor>` configuration within the `formGroup`.
2. Add the `formControlName` directive to the editor configuration. For example:

```html
<editor [formControlName]="schema.key" [init]="{plugins: 'link'}"></editor>
```
For information on using reactive forms, see: [Angular documentation - Reactive Forms](https://angular.io/guide/reactive-forms).

### Event binding

Functions can be bound to editor events, such as:

```html
<editor (onSelectionChange)="handleEvent($event)"></editor>
```
When the handler is called (`handleEvent` in this example), it is called with an event containing two properties:

- `event` - The TinyMCE event object.
- `editor` - A reference to the editor.

The following events are available:

#### Supported browser events

- `onBeforePaste`
- `onBlur`
- `onClick`
- `onContextMenu`
- `onCopy`
- `onCut`
- `onDblclick`
- `onDrag`
- `onDragDrop`
- `onDragEnd`
- `onDragGesture`
- `onDragOver`
- `onDrop`
- `onFocus`
- `onFocusIn`
- `onFocusOut`
- `onKeyDown`
- `onKeyPress`
- `onKeyUp`
- `onMouseDown`
- `onMouseEnter`
- `onMouseLeave`
- `onMouseMove`
- `onMouseOut`
- `onMouseOver`
- `onMouseUp`
- `onPaste`
- `onSelectionChange`

#### Supported TinyMCE events

- `onActivate`
- `onAddUndo`
- `onBeforeAddUndo`
- `onBeforeExecCommand`
- `onBeforeGetContent`
- `onBeforeRenderUI`
- `onBeforeSetContent`
- `onChange`
- `onClearUndos`
- `onDeactivate`
- `onDirty`
- `onExecCommand`
- `onGetContent`
- `onHide`
- `onInit`
- `onInitNgModel`
- `onLoadContent`
- `onNodeChange`
- `onPostProcess`
- `onPostRender`
- `onPreInit`
- `onPreProcess`
- `onProgressState`
- `onRedo`
- `onRemove`
- `onReset`
- `onSaveContent`
- `onSetAttrib`
- `onObjectResizeStart`
- `onObjectResized`
- `onObjectSelected`
- `onSetContent`
- `onShow`
- `onSubmit`
- `onUndo`
- `onVisualAid`

By default, all the available events will trigger from the editor to the `tinymce-angular` component. To limit the events triggering in the component, use the `allowedEvents` and `ignoreEvents` properties.

#### `allowedEvents`

> **Note:** This property requires `tinymce-angular` 4.2.0 or newer
Used to provide an allow-list of valid events to trigger from the editor to the `tinymce-angular` component. By default, the component will emit all the events listed in the [Event binding section](#eventbinding).

**Possible values:** A comma separated list of events to allow.

**Type** String

##### Example: Using `allowedEvents`

```html
<editor
  allowedEvents="onMouseDown,onKeyDown"
></editor>
```

#### `ignoreEvents`

> **Note:** This property requires `tinymce-angular` 4.2.0 or newer
Used to block a list of events from the `tinymce-angular` component.

**Possible values:** A comma separated list of events to ignore.

**Type** String

##### Example: Using `ignoreEvents`

```html
<editor
  ignoreEvents="onMouseEnter,onMouseLeave,onMouseOut,onMouseMove"
></editor>
```