Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    ng2-alt-summernotepublic

    ng2-alt-summernote

    Component to use Summernote in Angular 2.

    Example:

    Example

    The example repo is located here.

    Usage with Angular CLI:

    To use it with angular-cli:

    1. Install jquery, bootstrap and summernote:

      npm install --save jquery
      npm install --save bootstrap
      npm install --save summernote
    2. Add styles to angular-cli.json:

      "styles"[
         "styles.css",
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "../node_modules/codemirror/lib/codemirror.css",
         "../node_modules/summernote/dist/summernote.css"
         ],
    3. Add vendor.ts file with the following content:

      import * as jquery from 'jquery';
      window['jQuery'] = window['$'] = jquery;

      and add it to `angular-cli.json' scripts:

      "scripts"[
         "vendor.ts"
      ]
    4. Install ng2-alt-summernote:

    npm install --save ng2-alt-summernote
    

    5. Import SummernoteModule, ssbootstrap and summernote in app.module.ts:

    ```typescript
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    
    import 'bootstrap/dist/js/bootstrap.min.js';
    import 'summernote/dist/summernote.min.js';
    
    import {SummernoteComponent} from 'ng2-alt-summernote';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        SummernoteComponent,
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    ```
    
    1. Use it in you components:

      <summernote [(ngModel)]="text" [options]="options" [disabled]="disabled"></summernote>

    Usage with Webpack:

    To install in a webpack project:

    1. Install required packages:

      npm install --save bootstrap
      npm install --save font-awesome
      npm install --save codemirror
      npm install --save summernote
      npm install --save ng2-alt-summernote
    2. Import modules in vendor.ts (if available, if not use another typescript file):

      import 'jquery';
       
      import 'bootstrap/dist/js/bootstrap.min.js';
      import 'bootstrap/less/bootstrap.less';
      import 'font-awesome/less/font-awesome.less';
       
      import 'bootstrap/js/tooltip';
      import 'bootstrap/js/transition';
       
      import 'summernote/dist/summernote.js';
      import 'summernote/src/less/summernote.less';
    3. Import module in you NgModule:

      import { NgModule } from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
      import { HttpModule } from '@angular/http';
      import {FormsModule} from '@angular/forms';
      import { RouterModule } from '@angular/router';
       
      import {TestComponent} from './TestComponent';
      import {SummernoteModule} from 'ng2-alt-summernote/ng2-alt-summernote';
       
      import { AppComponent } from './AppComponent';
       
      @NgModule({
          imports: [
              BrowserModule,
              HttpModule,
              FormsModule,
              SummernoteModule
          ],
          declarations: [
              TestComponent,
              AppComponent
          ],
          bootstrap: [AppComponent]
      })
      export class AppModule {
       
      }
    4. Use it in your components:

      <summernote [(ngModel)]="text" [options]="options" [disabled]="disabled"></summernote>

    Note:

    This module is based on ng2-summernote. I tried forking the repo to fix the issues I was having but decided to start from scratch because it had some things that I didn't need.

    install

    npm i ng2-alt-summernote

    Downloadslast 7 days

    60

    version

    2.0.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar