---
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/latest/angular-ref/index.md"
version: "latest"
last_updated: "2026-01-19T04:37:32Z"
tokens: 3361
---
# 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)
  - [`licenseKey`](#licensekey)
  - [`cloudChannel`](#cloudchannel)
  - [`disabled`](#disabled)
  - [`readonly`](#readonly)
  - [`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)
- [`Angular module`](#angular-modules)

## 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 |
| --- | --- |
| 16+ | 8.x |
| 14 or 15 | 7.x |
| 13 | 6.x |
| 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 @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="no-api-key" [init]="{plugins: 'link'}" />
```

## Configuring the editor

The editor accepts the following properties:

```jsx
<editor
  apiKey="no-api-key"
  cloudChannel="{productmajorversion}"
  licenseKey="gpl"
  [disabled]="false"
  [readonly]="false"
  id=""
  [init]="{ }"
  initialValue=""
  [inline]="false"
  plugins=""
  tagName="div"
  toolbar=""
/>
```
None of the configuration properties are **required** for `tinymce-angular` to work. Specify a Tiny Cloud API key using `apiKey` to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." 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="no-api-key" />
```

### `licenseKey`

Specifies the TinyMCE license key. Required for self-hosted deployments of TinyMCE. This property is **not required** for cloud-only deployments using the Tiny Cloud as your cloud subscription automatically includes the commercial license. For more information, see: [License Key](../license-key/).

**Type:** `String`

**Default value:** `undefined`

**Possible values:** * `undefined` - Use this when loading from Tiny Cloud with an API key
* `'gpl'` - For open source projects using GPL license
* `'T8LK:…​'` - For commercial TinyMCE installations (must use this prefix for version 8+)
* `'GPL+T8LK:'` - For open source projects that require premium features while maintaining GPL compliance.

> **Note:** In hybrid deployments (using both cloud and self-hosted features):
> 
> - You can provide both an API key and a license key
> - The editor will use cloud services when available
> - It will automatically fall back to the local license key if cloud services are not contactable

#### Example: Commercial license

```html
<editor licenseKey="T8LK:..." />
```

#### Example: using `licenseKey` with GPL

```html
<editor licenseKey="gpl" />
```

> **Tip:** The `licenseKey="gpl"` property must be set on the `<editor>` component when using TinyMCE 8 and above.

### `cloudChannel`

**Type:** `String`

**Default value:** `'8'`

**Possible values:** `'8'`, `'8-testing'`, `'8-dev'`, `'8.9'`

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

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

Such as:

```html
<editor
  apiKey="no-api-key"
  cloudChannel="8-dev"
/>
```
For information TinyMCE development channels, see: [Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases](../editor-plugin-version/#8-8-testing-and-8-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" />
```

### `readonly`

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

**Type:** `Boolean`

**Default value:** `false`

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

#### Example: using `readonly`

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

### `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" />
```

### `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'
  }"
/>
```

### `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..." />
```

### `inline`

Used to set the editor to inline mode. Using `<editor [inline]="true" />` 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" />
```

### `plugins`

Used to include plugins for the editor. Using `<editor plugins="lists code" />` 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`

#### Example: using `plugins`

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

### `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" />
```

### `tagName`

Only valid when [`<editor [inline]="true" />`](#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"
/>
```

### `toolbar`

Used to set the toolbar for the editor. Using `<editor toolbar="bold italic" />` 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"
/>
```

## Using the `ngModel` directive

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

```html
<editor [(ngModel)]="dataModel" />
```
For information on using `NgModel`, see: [Angular documentation - NgModel](https://angular.dev/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" />
```

## 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'}" />
```
For information on using reactive forms, see: [Angular documentation - Reactive Forms](https://angular.dev/guide/forms/reactive-forms).

## Event binding

Functions can be bound to editor events, such as:

```html
<editor (onSelectionChange)="handleEvent($event)" />
```
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`
- `onCompositionEnd`
- `onCompositionStart`
- `onCompositionUpdate`
- `onCopy`
- `onCut`
- `onDblclick`
- `onDrag`
- `onDragDrop`
- `onDragEnd`
- `onDragGesture`
- `onDragOver`
- `onDrop`
- `onFocus`
- `onFocusIn`
- `onFocusOut`
- `onInput`
- `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`

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

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

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