angular-tinymce

Build Status

npm version

Example

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.

Features

Usage

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": [
    "../node_modules/tinymce/tinymce.js",
    "../node_modules/tinymce/themes/modern/theme.js"
]
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'
}

Setup

Import TinyMceModule in your main or feature module:

import { TinyMceModule } from 'angular-tinymce';

@NgModule({
    imports: [
        ...
        TinyMceModule.forRoot({...})
    ],
    ...
})

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';

TinyMceModule.forRoot(tinymceDefaultSettings())

Usage in HTML

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

or

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

Configuration

Settings

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

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 github.com
🕒 Last Update a year ago
🕒 Created 4 years ago
🐞 Open Issues 4
➗ Star-Issue Ratio 3
😎 Author stewieoO