---
title: "TinyMCE Angular integration technical reference"
description: "Technical reference for the TinyMCE Angular integration"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/angular-ref/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/angular-ref/index.md"
version: "6"
last_updated: "2022-11-30T01:26:11Z"
tokens: 2969
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/angular-ref/).
# TinyMCE Angular integration technical reference

**Covered in this section:**

- [Supported Angular versions](#supported-angular-versions)
- [Installing the TinyMCE Angular integration using NPM](#installing-the-tinymce-angular-integration-using-npm)
- [Using the TinyMCE Angular integration](#using-the-tinymce-angular-integration)
- [Configuring the editor](#configuring-the-editor)

  - [`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](#using-the-ngmodel-directive)

  - [`modelEvents`](#modelevents)
- [Using with reactive forms](#using-with-reactive-forms)
- [Event binding](#event-binding)

  - [Supported browser events](#supported-browser-events)
  - [Supported TinyMCE events](#supported-tinymce-events)
  - [`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 |
| --- | --- |
| 13+ | 5.x or newer |
| 9 to 12 | 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:

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

```ts
// 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="6"
  [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/).

**Type:** `String`

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

#### Example: using `apiKey`

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

### `cloudChannel`

**Type:** `String`

**Default value:** `'6'`

**Possible values:** `'6'`, `'6-testing'`, `'6-dev'`, `'6.8'`

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

- `6` (**Default**): The current enterprise release of TinyMCE.
- `6-testing`: The current release candidate for the next enterprise release of TinyMCE.
- `6-dev`: The nightly-build version of TinyMCE.
- A version number such as `6.8`: The specific enterprise release version of TinyMCE.

Such as:

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

### `disabled`

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

**Type:** `Boolean`

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

**Type:** `String`

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

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

**Type:** `Object`

**Default value:** `{ }`

#### Example: using `init`

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

### `initialValue`

Initial content of the editor when the editor is initialized.

**Type:** `String`

**Default value:** `' '`

#### 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`](../inline-editor-options/#inline) and [Setup inline editing mode](../use-tinymce-inline/).

**Type:** `Boolean`

**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](../work-with-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.

**Type:** `String`

**Default value:** `'div'`

#### 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](../toolbar-configuration-options/#toolbar).

**Type:** `String`

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

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

**Type:** `String`

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

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

#### 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](#event-binding).

**Type:** `String`

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

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

**Type:** `String`

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

#### Example: using `ignoreEvents`

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