Angular Integration

Using TinyMCE together with Angular 2+ with the @tinymce/tinymce-angular component

Contribute to this page

The absolutely easiest way to get started using TinyMCE with Angular 2+ is with our official @tinymce/tinymce-angular component!

Installation

$ npm install @tinymce/tinymce-angular

Usage

Loading the component

Import the EditorModule from the npm package like this:

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

And add it to you application module:

// 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]
})

Using the component in your templates

Use the editor in your templates like this:

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

Configuring the editor

The editor accepts the following inputs:

ngModel

You can also use the ngModel directive (more info in the Angular documentation) on the editor to simplify using it in a form:

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

Event binding

You can also bind editor events via a shorthand prop on the editor, for example: js <editor (onSelectionChange)="handleEvent($eventObj)"></editor> Where the handler gets called with an object containing the properties event, which is the event object, and editor, which is a reference to the editor.

Here is a full list of the events available:

All available events

  • onActivate
  • onAddUndo
  • onBeforeAddUndo
  • onBeforeExecCommand
  • onBeforeGetContent
  • onBeforeRenderUI
  • onBeforeSetContent
  • onBeforePaste
  • onBlur
  • onChange
  • onClearUndos
  • onClick
  • onContextMenu
  • onCopy
  • onCut
  • onDblclick
  • onDeactivate
  • onDirty
  • onDrag
  • onDragDrop
  • onDragEnd
  • onDragGesture
  • onDragOver
  • onDrop
  • onExecCommand
  • onFocus
  • onFocusIn
  • onFocusOut
  • onGetContent
  • onHide
  • onInit
  • onKeyDown
  • onKeyPress
  • onKeyUp
  • onLoadContent
  • onMouseDown
  • onMouseEnter
  • onMouseLeave
  • onMouseMove
  • onMouseOut
  • onMouseOver
  • onMouseUp
  • onNodeChange
  • onObjectResizeStart
  • onObjectResized
  • onObjectSelected
  • onPaste
  • onPostProcess
  • onPostRender
  • onPreInit
  • onPreProcess
  • onProgressState
  • onRedo
  • onRemove
  • onReset
  • onSaveContent
  • onSelectionChange
  • onSetAttrib
  • onSetContent
  • onShow
  • onSubmit
  • onUndo
  • onVisualAid

Loading TinyMCE

Auto-loading from TinyMCE Cloud

The Editor component needs TinyMCE to be globally available to work, but to make it as easy as possible it will automatically load TinyMCE Cloud if it can't find TinyMCE available when the component has mounted. To get rid of the This domain is not registered... warning, sign up for the cloud and enter the api key like this:

<editor apiKey="test" [init]="{/* your settings */}"></editor>

You can also define what cloud channel you want to use out these three * stable Default. The most stable and well tested version that has passed the Ephox quality assurance process. * testing This channel will deploy the current candidate for release to the stable channel. * dev The cutting edge version of TinyMCE updated daily for the daring users.

So using the dev channel would look like this:

<editor
  apiKey="YOUR_API_KEY"
  cloudChannel="dev"
  [init]="{/* your settings */}"
  >
</editor>

For more info on the different versions see the documentation.

Loading TinyMCE by yourself

To opt out of using TinyMCE cloud you have to make TinyMCE globally available yourself. This can be done either by hosting the tinymce.min.js file by youself and adding a script tag to you HTML or, if you are using a module loader, installing TinyMCE with npm. For info on how to get TinyMCE working with module loaders check out this page in the documentation.

A note about integrations

We are pleased to provide integrations/code guidance to help you build great products with TinyMCE. If you have queries about this integration, please join the TinyMCE Community.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.