node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »



Component to use Summernote in Angular 2.



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:

  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:

  4. Install ng2-alt-summernote:

npm install --save ng2-alt-summernote

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

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';

  declarations: [
  imports: [
  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';
        imports: [
        declarations: [
        bootstrap: [AppComponent]
    export class AppModule {
  4. Use it in your components:

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


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.