Build Status

npm version


Important changes

  • tinymce-editor is now angular-tinymce
  • Due to building changes the TinyMce script won't be loaded automatically anymore. The app will now have a smaller filesize but you have to include the tinymce script manually. Check under "Include or Import" how to do so.



First, install the package

npm install angular-tinymce

Include or Import

Method 1:

Include tinymce and all the plugin scripts you need in your angular-cli.json

"scripts": [
Method 2:

Copy tinymce and all the plugins/themes you need into your asset folder and set following properties in the settings:

    tinymceScriptURL: 'assets/tinymce/tinymce.min.js',
    baseURL: '',
    skin_url: '/assets/tinymce/skins/lightgray',
    theme_url: '/assets/tinymce/themes/modern/theme.min.js'


Import TinyMceModule in your main or feature module:

import { TinyMceModule } from 'angular-tinymce';

    imports: [

The forRoot() method expects a global settings object. You can either define your own or use the default settings that come with this module.

import { tinymceDefaultSettings } from 'angular-tinymce';


Usage in HTML

<angular-tinymce [formControl]='contentControl'></angular-tinymce>


<angular-tinymce [(ngModel)]='content'></angular-tinymce>



If you want to use different settings for each editor you can bind them to the settings input property:

<angular-tinymce [settings]='yourSettingsObject'></angular-tinymce>

If you want to bind any TinyMce event, just use the output property: (Event names are all lowercase)

<angular-tinymce (click)='yourHandler($event)'></angular-tinymce>

All events are supported. List of all events

Angular Tinymce

TinyMce UI Component for Angular (2+)

Angular Tinymce Info

⭐ Stars 13
🔗 Source Code
🕒 Last Update a year ago
🕒 Created 4 years ago
🐞 Open Issues 4
➗ Star-Issue Ratio 3
😎 Author stewieoO