Angular 2 component for TinyMCE MCE WYSIWYG editor
Clone or download
Latest commit 1ac5200 Aug 6, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e tab indentation Aug 5, 2018
projects/angular2-tinymce-lib add outputs Aug 6, 2018
src add outputs Aug 6, 2018
.editorconfig update indentation, fix 15, 46, 60, 62 Aug 5, 2018
.gitignore initial commit Jun 7, 2018
.gitlab-ci.yml fix npm script Aug 5, 2018
CHANGELOG.md add outputs Aug 6, 2018
README.md add outputs Aug 6, 2018
angular.json tab indentation Aug 5, 2018
package.json 3.3.0 Aug 6, 2018
tsconfig.json tab indentation Aug 5, 2018
tslint.json tab indentation Aug 5, 2018
yarn.lock update indentation, fix 15, 46, 60, 62 Aug 5, 2018

README.md

angular2-tinymce pipeline status

Now compatible with Angular 6!

Demo

Usage

First, install tinymce and this lib via npm:

npm install --save tinymce angular2-tinymce

Then copy lightgray skin files from node_modules/tinymce 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).

To support AOT mode in Angular 6 and higher you also need to include tinymce in your scripts section in angular.json config file:

 "scripts": [
    "node_modules/tinymce/tinymce.min.js",
    ...
]

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

import { TinymceModule } from 'angular2-tinymce';

@NgModule({
  imports: [
    ...
    TinymceModule.withConfig({})
  ],
  ...
})
export class AppModule { }

Then use it:

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

or

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

You can also use template variable tinymce to get instance of tinymce:

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

then in component.ts:

@ViewChild('tinymce') tinymce;
ngAfterViewInit() {
  console.log(this.tinymce);
}

Configure

You can configure TinyMCE globally:

import { TinymceModule } from 'angular2-tinymce';

@NgModule({
  imports: [
    ...
    TinymceModule.withConfig({
      ...  //any TinyMCE config here
    })
  ],
  ...
})
export 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

Also you can override options in each instance like that:

<app-tinymce [(ngModel)]='title' [options]='{ branding:false }'></app-tinymce>

Events

You can use outputs to catch tinymce events. You can see full list of available outputs here.

<app-tinymce [(ngModel)]='title' (init)='log($event)' (keydown)='log($event)'></app-tinymce>

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:

import { TinymceModule } from 'angular2-tinymce';

@NgModule({
  imports: [
    ...
    TinymceModule.withConfig({
      plugins: ['emoticons'],
      toolbar: 'emoticons'
    })
  ],
  ...
})
export class AppModule { }

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

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

Contributing

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

Upcoming features

  • Tinymce configuration
  • Aot support
  • Add demo
  • Add CI
  • Per-editor configuration
  • Events
  • Directive
  • File uploading
  • Tests