angular2-tinymce - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

package.json

 {
   "name": "angular2-tinymce",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Angular 2 component for TinyMCE MCE WYSIWYG editor",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -11,5 +11,6 @@ # 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`:
-```
+```typescript
 import { TinymceModule } from 'angular2-tinymce';
@@ -27,5 +28,71 @@
 
-## Upcoming features:
-- [ ] Tinymce configuration
+Then use it:
+```html
+<app-tinymce [formControl]='contentControl'></app-tinymce>
+```
+or
+```html
+<app-tinymce [(ngModel)]='content'></app-tinymce>
+```
+
+## Configure
+You can configure TinyMCE globally:
+```typescript
+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:
+```typescript
+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:
+```typescript
+import 'tinymce/plugins/emoticons/plugin.js';
+```
+## Contributing
+Please feel free to leave your PRs, issues, feature requests.
+
+## Upcoming features
+- [x] Tinymce configuration
+- [ ] Per-editor configuration
+- [ ] Add github pages
 - [ ] File uploading
 - [ ] Events
+- [ ] Aot support
+- [ ] Tests

src/angular2-tinymce.component.ts

@@ -1,3 +0,4 @@
-import { Component, OnDestroy, AfterViewInit, forwardRef, NgZone } from '@angular/core';
+import { Component, OnDestroy, AfterViewInit, forwardRef, NgZone, Inject } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+import { TinymceOptions } from './angular2-tinymce.config.interface';
 
@@ -36,21 +37,36 @@ import tinymce from 'tinymce/tinymce.js';
 
-	constructor(private zone: NgZone) {
+	private options: any;
+	constructor(
+		private zone: NgZone,
+		@Inject('TINYMCE_CONFIG') private config: TinymceOptions
+	) {
+		this.options = Object.assign(new TinymceOptions(), this.config);
+		this.options.selector = '#' + this.elementId;
+		this.options.setup = editor => {
+			this.editor = editor;
+			editor.on('change keyup', () => {
+				const content = editor.getContent();
+				this.value = content;
+			});
+			if (typeof this.config.setup === 'function') {
+				this.config.setup(editor);
+			}
+		}
+		this.options.init_instance_callback = editor => {
+			editor && this.value && editor.setContent(this.value)
+			if (typeof this.config.init_instance_callback === 'function') {
+				this.config.init_instance_callback(editor);
+			}
+		}
+		if (this.config.auto_focus) {
+			this.options.auto_focus = this.elementId;
+		}
 	}
 
+
 	ngAfterViewInit() {
-		tinymce.init({
-			selector: '#' + this.elementId,
-			plugins: ['link', 'paste', 'table', 'advlist', 'autoresize', 'lists',, 'code'],
-			skin_url: '/assets/tinymce/skins/lightgray',
-			setup: editor => {
-				this.editor = editor;
-				editor.on('change keyup', () => {
-					const content = editor.getContent();
-					this.value = content;
-				});
-			},
-			init_instance_callback: editor => {
-				editor && this.value && editor.setContent(this.value)
-			}
-		});
+		if (this.options.baseURL) {
+			tinymce.baseURL = this.options.baseURL;
+		}
+		tinymce.init(this.options);
 	}
@@ -57,0 +73,0 @@

src/angular2-tinymce.module.ts

@@ -1,4 +0,6 @@
-import { NgModule } from '@angular/core';
+import { NgModule, ModuleWithProviders } from '@angular/core';
 import { TinymceComponent } from './angular2-tinymce.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TinymceOptions } from './angular2-tinymce.config.interface';
+import tinymce from 'tinymce/tinymce.js';
 
@@ -15,6 +17,17 @@ @NgModule({
 		TinymceComponent
+	],
+	providers: [
+		{ provide: 'TINYMCE_CONFIG', useClass: TinymceOptions }
 	]
 })
 export class TinymceModule {
-
-}
+	static withConfig(userConfig: TinymceOptions = {}): ModuleWithProviders {
+		return {
+			ngModule: TinymceModule,
+			providers: [
+				{ provide: 'TINYMCE_CONFIG', useValue: userConfig }
+			]
+		}
+	}
+}
+export { tinymce }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21580

increased by18.53%

Number of package files

15

increased by7.14%

Lines of code

597

increased by9.34%

Number of lines in readme file

97

increased by223.33%

No dependency changes