angular2-tinymce

Now compatible with Angular 4.0.1 with AOT support!

Usage

First, install package via npm:

npm install --save angular2-tinymce

Then copy lightgray skin files from here and here to the /assets folder. So, i.e. there must be available /assets/tinymce/skins/lightgray/skin.min.css and /assets/tinymce/skins/lightgray/content.min.css file. You can override skin path by specifying skin_url option (default /assets/tinymce/skins/lightgray).

Import TinymceModule in you app.module.ts like this:

1import { TinymceModule } from 'angular2-tinymce';
2
3@NgModule({
4  imports: [
5    ...
6    TinymceModule.withConfig({})
7  ],
8  ...
9})
10export class AppModule { }

Then use it:

1<app-tinymce [formControl]='contentControl'></app-tinymce>

or

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

Configure

You can configure TinyMCE globally:

1import { TinymceModule } from 'angular2-tinymce';
2
3@NgModule({
4  imports: [
5    ...
6    TinymceModule.withConfig({
7      ...  //any TinyMCE config here
8    })
9  ],
10  ...
11})
12export class AppModule { }

Please note that config is extended a bit.

• Besides the original config angular2-tinymce supports baseURL for providing, i.e., custom plugins paths.

• auto_focus option is boolean instead of string.

• You cannot specify selector option (and you don't need to, right?).

• setup and init_instance_callback are executed after the components'.

• You can view more info about supported options [here] (src/angular2-tinymce.config.interface.ts)

Plugins

If you need other plugins than standart (link paste table advlist autoresize lists code) you should create plugins folder in the baseURL (default '/assets/tinymce') and place your plugins in it.

Example: Place emoticons plugin to an /assets/tinymce/plugins folder, then:

1import { TinymceModule } from 'angular2-tinymce';
2
3@NgModule({
4  imports: [
5    ...
6    TinymceModule.withConfig({
7      plugins: ['emoticons'],
8      toolbar: 'emoticons'
9    })
10  ],
11  ...
12})
13export class AppModule { }

Alternativaly you can npm install tinymce --save and import plugins like that:

1import 'tinymce/plugins/emoticons/plugin.js';

SystemJS configuration

When using SystemJS, you need to load tinymce plugins as global shim modules instead of AMD modules (default). Update the file systemjs.config.js as following:

1System.config({
2  meta: {
3    ...
4    'node_modules/tinymce/plugins/advlist/plugin.js': { format: 'global' },
5    'node_modules/tinymce/plugins/autoresize/plugin.js': { format: 'global' },
6    'node_modules/tinymce/plugins/code/plugin.js': { format: 'global' },
7    'node_modules/tinymce/plugins/link/plugin.js': { format: 'global' },
8    'node_modules/tinymce/plugins/lists/plugin.js': { format: 'global' },
9    'node_modules/tinymce/plugins/paste/plugin.js': { format: 'global' },
10    'node_modules/tinymce/plugins/table/plugin.js': { format: 'global' },
11    'node_modules/tinymce/themes/modern/theme.js': { format: 'global' },	
12  },
13  map: {
14    ...
15    'angular2-tinymce': 'node_modules/angular2-tinymce/dist',
16    'tinymce': 'node_modules/tinymce',
17  },
18  packages: {
19    ...
20    'angular2-tinymce': { main: 'index.js', defaultExtension: 'js' },
21    'tinymce': { defaultExtension: 'js' },
22  }
23});

Note that tinymce npm package should be loaded in addition to angular2-tinymce when using SystemJS. Otherwise, it won't be able to load the plugins.

Contributing

Please feel free to leave your PRs, issues, feature requests.

Upcoming features

• Tinymce configuration
• Aot support
• Per-editor configuration
• Add github pages demo
• File uploading
• Events
• Tests