Important changes to Tiny Cloud pricing > Find out more

Angular 4+ integration

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

Contribute to this page

TinyMCE Angular integration quick start guide

The Official TinyMCE Angular component integrates TinyMCE into Angular projects. This procedure creates a basic Angular application containing a TinyMCE editor based on our Basic TinyMCE example.

For examples of the TinyMCE Angular integration, visit the tinymce-angular storybook.


This procedure requires:


  1. On a command line or command prompt, install the Angular CLI Tool package.

     $ npm install -g @angular/cli
  2. Create a new Angular project named tinymce-angular-demo.

     $ ng new --defaults --skip-git tinymce-angular-demo
  3. Change into the newly created directory.

     $ cd tinymce-angular-demo
  4. Install the tinymce-angular package and save it to your package.json with --save.

     $ npm install --save @tinymce/tinymce-angular
  5. Using a text editor, open /path/to/tinymce-angular-demo/src/app/app.module.ts and replace the contents with:

     import { BrowserModule } from '@angular/platform-browser';
     import { NgModule } from '@angular/core';
     import { EditorModule } from '@tinymce/tinymce-angular';
     import { AppComponent } from './app.component';
       declarations: [
       imports: [
       providers: [],
       bootstrap: [AppComponent]
     export class AppModule { }
  6. Using a text editor, open /path/to/tinymce-angular-demo/src/app/app.component.html and replace the contents with:

     <h1>TinyMCE 5 Angular Demo</h1>
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'

    This TinyMCE editor configuration should replicate the example on the Basic example page.

  7. Provide access to TinyMCE using Tiny Cloud or by self-hosting TinyMCE.

    • Tiny Cloud

      Include the apiKey option in the editor element and include your Tiny Cloud API key.

      Such as:

        <editor apiKey="your-api-key" [init]={ /* your other settings */ } ></editor>
    • TinyMCE Self-hosted

      TinyMCE can be self-hosted by: including TinyMCE within the application, deploying TinyMCE independent of the Angular application, or bundling TinyMCE with the Angular application.

      • Including TinyMCE within the Application

        To load TinyMCE and TinyMCE-Angular in a project managed by the Angular CLI Tool:

        1. Install the tinymce-angular package and save it to your package.json with --save.

           $ npm install --save tinymce
        2. Using a text editor; open angular.json and add TinyMCE to the assets property.

           "assets": [
             { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
        3. Load TinyMCE.

          • To load TinyMCE when the editor is initialized (also known as lazy loading), add a dependency provider to the module using the TINYMCE_SCRIPT_SRC token.

            Note: Lazy loading is available for tinymce-angular 3.5.0 or later.

              import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
              /* ... */
                /* ... */
                imports: [
                providers: [
                  { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
          • To load TinyMCE when the page or application is loaded, open angular.json and add TinyMCE to the global scripts tag.

              "scripts": [

            Update the editor configuration to include the base_url and suffix options.

              <editor [init]="{
                base_url: '/tinymce', // Root for resources
                suffix: '.min'        // Suffix to use when loading resources
      • Deploy TinyMCE independent of the Angular application

        To use an independent deployment of TinyMCE, add a script to either the <head> or the end of the <body> of the HTML file, such as:

        <script src="/path/to/tinymce.min.js"></script>

        To use an independent deployment of TinyMCE with the create a Angular application, add the script to /path/to/tinymce-angular-demo/src/app/app.component.html.

        For information on self-hosting TinyMCE, see: Installing TinyMCE.

      • Bundling TinyMCE with the Angular application using a module loader

        To bundle TinyMCE using a module loader (such as Webpack and Browserify), see: Usage with module loaders.

  8. Test the application using the Angular development server.

    • To start the development server, navigate to the tinymce-angular-demo directory and run:

        $ ng serve --open
    • To stop the development server, select on the command line or command prompt and press Ctrl+C.

Deploying the application to a HTTP server.

The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: Angular Docs - Building and serving Angular apps or Angular Docs - Deployment.

To deploy the application to a local HTTP Server:

  1. Navigate to the tinymce-angular-demo directory and run:

     $ ng build
  2. Copy the contents of the tinymce-angular-demo/dist directory to the root directory of the web server.

The application has now been deployed on the web server.

Note: Additional configuration is required to deploy the application outside the web server root directory, such as http://localhost:<port>/my_angular_application.

Next Steps

TinyMCE Angular technical reference

Covered in this section:

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

This package is for Angular 5+. For Angular 4, use @tinymce/tinymce-angular-legacy

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
       declarations: [
       imports: [
         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:

  [init]="{  }"

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.


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 sign-up page.

Default value: no-api-key

Type: String

Example: apiKey


Default value: 5

Possible values: 5-stable, 5-testing, 5-dev

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

  • 5-stable (Default): The current enterprise release of TinyMCE.
  • 5-testing: The current release candidate for the next enterprise release of TinyMCE.
  • 5-dev: The nightly-build version of TinyMCE.

Such as:


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


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

Default value: false

Possible values: true, false

Example: disabled


An id for the editor. Used for retrieving the editor instance using the tinymce.get('ID') method. Defaults to an automatically generated UUID.

Default value: Automatically generated UUID.

Type: String

Example: id


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

For information on the TinyMCE selector (tinymce.init), see: Basic setup.

Default value: { }

Type: Object

Example: init
    plugins: [
     'lists link image paste help wordcount'
    toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'


Initial content of the editor when the editor is initialized.

Default value: ' '

Type: String

Example: initialValue
  initialValue="Once upon a time..."


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 and Setup inline editing mode.

Default value: false

Possible values: true, false

Example: inline


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.

Type: String or Array

Example: plugins
  plugins="lists code"


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


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

Default value: div

Type: String

Example: tagName


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.

Possible values: See Editor control identifiers - Toolbar controls.

Type: String

Example: toolbar
  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"></editor>

For information on using NgModel, see: Angular documentation - NgModel.

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:

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

  • 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
  • onPreProcess
  • onProgressState
  • onRedo
  • onRemove
  • onReset
  • onSaveContent
  • onSelectionChange
  • onSetAttrib
  • onSetContent
  • onShow
  • onSubmit
  • onUndo
  • onVisualAid

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.