angular-tech-ref.adoc

Covered in this section:

• Supported Angular versions

• Installing the TinyMCE Angular integration using NPM

• Using the TinyMCE Angular integration

• Configuring the editor

  • apiKey

  • licenseKey

  • cloudChannel

  • disabled

  • id

  • init

  • initialValue

  • inline

  • outputFormat

  • plugins

  • tagName

  • toolbar

• Using the ngModel directive

  • modelEvents

• Using with reactive forms

• Event binding

  • Supported browser events

  • Supported TinyMCE events

  • allowedEvents

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

npm install --save @tinymce/tinymce-angular

Using the TinyMCE Angular integration

1. Import the EditorModule from the npm package using:

   import { EditorModule } from '@tinymce/tinymce-angular';

   Add the EditorModule to @NgModule({imports}):

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

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

Configuring the editor

The editor accepts the following properties:

<editor
  apiKey="no-api-key"
  cloudChannel="{productmajorversion}"
  [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 {cloudname} 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

{cloudname} API key. Required for deployments using the {cloudname} to provide the {productname} editor.

partial$misc/get-an-api-key.adoc

Type: String

Default value: 'no-api-key'

Example: using apiKey

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

licenseKey

{cloudname} License key.

Use this when self-hosting {productname} instead of loading from {cloudname}. For more information, see: License Key.

Type: String

Default value: undefined

Possible values: undefined, 'gpl' or a valid {productname} license key

Example: using licenseKey

<Editor
  licenseKey='your-license-key'
/>

cloudChannel

Type: String

Default value: '{productmajorversion}'

Possible values: '{productmajorversion}', '{productmajorversion}-testing', '{productmajorversion}-dev', '{productminorversion}'

Changes the {productname} build used for the editor to one of the following {cloudname} channels:

• {productmajorversion} (Default): The current enterprise release of {productname}.

• {productmajorversion}-testing: The current release candidate for the next enterprise release of {productname}.

• {productmajorversion}-dev: The nightly-build version of {productname}.

• A version number such as {productminorversion}: The specific enterprise release version of {productname}.

Such as:

<editor
  apiKey="your-api-key"
  cloudChannel="{productmajorversion}-dev"
></editor>

For information {productname} development channels, see: Specifying the {productname} editor version deployed from Cloud - dev, testing, and stable releases.

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

<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

Example: using id

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

init

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

For information on the {productname} selector (tinymce.init), see: Basic setup.

Type: Object

Default value: { }

Example: using init

<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

<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 {productname} selector (tinymce.init).

For information on inline mode, see: User interface options - inline and Setup inline editing mode.

Type: Boolean

Default value: false

Possible values: true, false

Example: using inline

<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 {productname} selector (tinymce.init).

For information on adding plugins to {productname}, see: Add plugins to {productname}.

Type: String or Array

Example: using plugins

<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

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

tagName

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

Type: String

Default value: 'div'

Example: using tagName

<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 {productname} selector (tinymce.init).

For information setting the toolbar for {productname}, see: User interface options - toolbar.

Type: String

Possible values: See Toolbar Buttons Available for {productname}.

Example: using toolbar

<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:

<editor [(ngModel)]="dataModel"></editor>

For information on using NgModel, see: Angular documentation - 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

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

Using with reactive forms

To use {productname} Angular component with reactive forms:

1. Include the <editor> configuration within the formGroup.

2. Add the formControlName directive to the editor configuration. For example:

   <editor [formControlName]="schema.key" [init]="{plugins: 'link'}"></editor>

For information on using reactive forms, see: Angular documentation - Reactive Forms.

Event binding

Functions can be bound to editor events, such as:

<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

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

Type: String

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

Example: using allowedEvents

<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

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