angular-tech-ref.adoc

Covered in this section:

• Supported Angular versions

• Installing the {productname} Angular integration using NPM

• Using the {productname} Angular integration

• Configuring the editor

  • apiKey

  • licenseKey

  • cloudChannel

  • disabled

  • readonly

  • id

  • init

  • initialValue

  • inline

  • outputFormat

  • plugins

  • tagName

  • toolbar

• Using the ngModel directive

  • modelEvents

• Using with reactive forms

• Event binding

  • Supported browser events

  • Supported {productname} 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 {productname} Angular integration using NPM

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

npm install @tinymce/tinymce-angular

Using the {productname} 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="no-api-key" [init]="{plugins: 'link'}" />

Configuring the editor

The editor accepts the following properties:

<editor
  apiKey="no-api-key"
  cloudChannel="{productmajorversion}"
  [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 {cloudname} API key using apiKey to remove the "A valid API key is required to continue using {productname}. 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="no-api-key" />

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="no-api-key"
  cloudChannel="{productmajorversion}-dev"
/>

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

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

<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

Example: using id

<editor id="uuid" />

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

initialValue

Initial content of the editor when the editor is initialized.

Type: String

Default value: ' '

Example: using initialValue

<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 {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" />

plugins

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

Example: using plugins

<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

<editor outputFormat="text" />

tagName

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

toolbar

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

Using the ngModel directive

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

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

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 {productname} editor events.

Example: using modelEvents

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

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

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)" />

When the handler is called (handleEvent in this example), it is called with an event containing two properties:

• event - The {productname} 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 {productname} 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" />

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