ng2-alt-summernote
Component to use Summernote in Angular 2.
Example:
The example repo is located here.
Usage with Angular CLI:
To use it with angular-cli:
-
Install jquery, bootstrap and summernote:
npm install --save jquery npm install --save bootstrap npm install --save summernote
-
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" ],
-
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" ]
-
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 { }
```
-
Use it in you components:
<summernote [(ngModel)]="text" [options]="options" [disabled]="disabled"></summernote>
Usage with Webpack:
To install in a webpack project:
-
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
-
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';
-
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 { }
-
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.