martinsvb / ng2-summernote

Angula 2.0 summernote wysiwyg editor integration
14 stars 12 forks source link

ng2-summernote

This component integrate summernote wysiwyg editor as directive to Angular 2.0 project.

Install

Summernote source files

Access ng2-summernote in Angular 2 application

import { Ng2Summernote } from 'ng2-summernote/ng2-summernote';

import { AppComponent } from './app.component'; import { routes } from './app.routes';

@NgModule({ imports: [ BrowserModule, HttpModule, RouterModule.forRoot(routes), FormsModule, ReactiveFormsModule ], declarations: [ Ng2Summernote, AppComponent ], providers: [ { provide: APP_BASE_HREF, useValue: '<%= APP_BASE %>' } ], bootstrap: [AppComponent] }) export class AppModule {}

- Import in component:

import { Component } from '@angular/core'; import { Ng2Summernote } from 'ng2-summernote/ng2-summernote';

@Component({ moduleId: module.id, selector: 'editor-example-component', templateUrl: 'editor-example.component.html' }) export class EditorExampleComponent {

// Editors ng-model bindings data: string = 'appendix'; data2: string = 'content';

// If you want add editors bindings to some model model: any = { data: this.data, data2: this.data2 }

// OnSubmit add current editors bindings to some model onSubmit() { this.model.data = this.data; this.model.data2 = this.data2; } }

- Component template example:
## Inputs

- you can set inputs standalone or put them to config input as json
- config input is stronger than standalone inputs, so never combine them
  (set config json object or standalone inputs)

@Input() height: number; @Input() minHeight: number; @Input() maxHeight: number; @Input() placeholder: string; @Input() focus: boolean; @Input() airMode: boolean; @Input() dialogsInBody: string; @Input() editable: boolean; @Input() lang: string; @Input() disableResizeEditor: string; @Input() serverImgUp: boolean; @Input() config: any;

/* URL for upload server images / @Input() hostUpload: string;

/* Uploaded images server folder / @Input() uploadFolder: string = "";



## Upload Image URL

If you want upload image to some URL set serverImgUp input
and then set hostUpload - it's your upload server URL
Components awaits returned array with URL of uploaded file
example: ["http://some-url.com/images/uploadedImg.jpg"]