Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular2-tinymce

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-tinymce

Angular 2 component for TinyMCE MCE WYSIWYG editor

  • 1.3.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

angular2-tinymce

Usage

First, install package via npm:

npm install --save angular2-tinymce

Then copy lightgray skin from [here] (https://github.com/Ledzz/angular2-tinymce/tree/master/demo/assets/tinymce/skins/lightgray) to the /assets folder. So, i.e. there must be available /assets/tinymce/skins/lightgray/skin.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:

import { TinymceModule } from 'angular2-tinymce';

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

Then use it:

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

or

<app-tinymce [(ngModel)]='content'></app-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] (https://github.com/Ledzz/angular2-tinymce/blob/master/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:

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
  • Per-editor configuration
  • Add github pages
  • File uploading
  • Events
  • Aot support
  • Tests

Keywords

FAQs

Package last updated on 26 Mar 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc