TinyMCE Angular Integration in Angular > 2

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 @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="5"
  [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 Tiny Cloud API key using apiKey to remove the This domain is not registered... 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 sign-up page.

Default value: no-api-key

Type: String

Example: apiKey

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

cloudChannel

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:

<editor
  apiKey="your-api-key"
  cloudChannel="5-dev"
></editor>

For information TinyMCE development channels, see: Specifying the TinyMCE 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).

Default value: false

Possible values: true, false

Example: disabled

<editor
  [disabled]="true"
></editor>

id

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

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

init

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

<editor
  [init]="{
    plugins: [
     'lists link image paste help wordcount'
    ],
    toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
  }"
></editor>

initialValue

Initial content of the editor when the editor is initialized.

Default value: ' '

Type: String

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

<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 TinyMCE selector (tinymce.init).

For information on adding plugins to TinyMCE, see: Add plugins to TinyMCE.

Type: String or Array

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

Default value: div

Type: String

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

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

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.

Working Example

install plugin using NPM command:

npm install --save @tinymce/tinymce-angular

app.modules.ts

import {EditorModule, TINYMCE_SCRIPT_SRC}   from ‘@tinymce/tinymce-angular’; //need to include 

app.component.ts

import { Component, OnInit, Input } from ‘@angular/core’;import { combineLatest, Observable, of } from ‘rxjs’;import { FormBuilder, FormGroup, FormControl } from ‘@angular/forms’;import * as $ from ‘jquery’;// import {  } from ‘@angular/forms’;// import {filter, map, pluck, switchMap, take, tap} from “rxjs/operators”;
@Component({  selector: ‘app-root’,  templateUrl: ‘./app.component.html’,  styleUrls: [‘./app.component.scss’],})export class AppComponent implements OnInit {  editorForm: FormGroup;  dataModel: string = ”;  // below one is config  public editorconfig = {    base_url: ‘/tinymce’,    suffix: ‘.min’,    height: 500,   plugins: [      ‘advlist autolink lists link image charmap print preview anchor codesample’,      ‘searchreplace visualblocks code fullscreen image imagetools’,      ‘insertdatetime media table paste code help wordcount’    ],    codesample_languages: [      { text: ‘TypeScript’, value: ‘typescript’ },      { text: ‘JavaScript’, value: ‘javascript’ },      { text: ‘HTML/XML’, value: ‘markup’ },      { text: ‘CSS’, value: ‘css’ }    ],    toolbar:      ‘undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image codesample’  };
  constructor(    private formBuilder: FormBuilder,  ) { }
  ngOnInit() {  }  ;

}

app.component.html

<editor class=”centered”  [init]=”editorconfig”></editor>