1 | # ng2-alt-summernote
|
2 |
|
3 | Component to use [Summernote](http://summernote.org/) in Angular 2.
|
4 |
|
5 | Example:
|
6 | --------
|
7 | [Example](https://carlescs.github.io/testangular/)
|
8 |
|
9 | The example repo is located [here](https://github.com/carlescs/testangular).
|
10 |
|
11 | Usage with Angular CLI:
|
12 | -----------------------
|
13 | To use it with angular-cli:
|
14 |
|
15 | 1. Install jquery, bootstrap and summernote:
|
16 |
|
17 | ```bash
|
18 | npm install --save jquery
|
19 | npm install --save bootstrap
|
20 | npm install --save summernote
|
21 | ```
|
22 |
|
23 | 2. Add styles to `angular-cli.json`:
|
24 |
|
25 | ```json
|
26 | "styles": [
|
27 | "styles.css",
|
28 | "../node_modules/bootstrap/dist/css/bootstrap.min.css",
|
29 | "../node_modules/codemirror/lib/codemirror.css",
|
30 | "../node_modules/summernote/dist/summernote.css"
|
31 | ],
|
32 | ```
|
33 |
|
34 | 3. Add `vendor.ts` file with the following content:
|
35 |
|
36 | ```typescript
|
37 | import * as jquery from 'jquery';
|
38 | window['jQuery'] = window['$'] = jquery;
|
39 | ```
|
40 |
|
41 | and add it to `angular-cli.json' scripts:
|
42 |
|
43 | ```json
|
44 | "scripts": [
|
45 | "vendor.ts"
|
46 | ]
|
47 | ```
|
48 |
|
49 | 4. Install `ng2-alt-summernote`:
|
50 |
|
51 | ```
|
52 | npm install --save npm-alt-summernote
|
53 | ```
|
54 |
|
55 | 5. Import `SummernoteModule`, `bootstrap` and `summernote` in `app.module.ts`:
|
56 |
|
57 | ```typescript
|
58 | import { BrowserModule } from '@angular/platform-browser';
|
59 | import { NgModule } from '@angular/core';
|
60 | import { FormsModule } from '@angular/forms';
|
61 | import { HttpModule } from '@angular/http';
|
62 |
|
63 | import 'bootstrap/dist/js/bootstrap.min.js';
|
64 | import 'summernote/dist/summernote.min.js';
|
65 |
|
66 | import {SummernoteComponent} from 'ng2-alt-summernote';
|
67 |
|
68 | import { AppComponent } from './app.component';
|
69 |
|
70 | @NgModule({
|
71 | declarations: [
|
72 | SummernoteComponent,
|
73 | AppComponent
|
74 | ],
|
75 | imports: [
|
76 | BrowserModule,
|
77 | FormsModule,
|
78 | HttpModule
|
79 | ],
|
80 | providers: [],
|
81 | bootstrap: [AppComponent]
|
82 | })
|
83 | export class AppModule { }
|
84 | ```
|
85 |
|
86 | 6. Use it in you components:
|
87 |
|
88 | ```html
|
89 | <summernote [(ngModel)]="text" [options]="options" [disabled]="disabled"></summernote>
|
90 | ```
|
91 |
|
92 | Usage with Webpack:
|
93 | -------------------
|
94 | To install in a webpack project:
|
95 |
|
96 | 1. Install required packages:
|
97 |
|
98 | ```bash
|
99 | npm install --save bootstrap
|
100 | npm install --save font-awesome
|
101 | npm install --save codemirror
|
102 | npm install --save summernote
|
103 | npm install --save ng2-alt-summernote
|
104 | ```
|
105 |
|
106 | 2. Import modules in `vendor.ts` (if available, if not use another typescript file):
|
107 |
|
108 | ```typescript
|
109 | import 'jquery';
|
110 |
|
111 | import 'bootstrap/dist/js/bootstrap.min.js';
|
112 | import 'bootstrap/less/bootstrap.less';
|
113 | import 'font-awesome/less/font-awesome.less';
|
114 |
|
115 | import 'bootstrap/js/tooltip';
|
116 | import 'bootstrap/js/transition';
|
117 |
|
118 | import 'summernote/dist/summernote.js';
|
119 | import 'summernote/src/less/summernote.less';
|
120 | ```
|
121 |
|
122 | 3. Import module in you `NgModule`:
|
123 |
|
124 | ```typescript
|
125 | import { NgModule } from '@angular/core';
|
126 | import { BrowserModule } from '@angular/platform-browser';
|
127 | import { HttpModule } from '@angular/http';
|
128 | import {FormsModule} from '@angular/forms';
|
129 | import { RouterModule } from '@angular/router';
|
130 |
|
131 | import {TestComponent} from './TestComponent';
|
132 | import {SummernoteModule} from 'ng2-alt-summernote/ng2-alt-summernote';
|
133 |
|
134 | import { AppComponent } from './AppComponent';
|
135 |
|
136 | @NgModule({
|
137 | imports: [
|
138 | BrowserModule,
|
139 | HttpModule,
|
140 | FormsModule,
|
141 | SummernoteModule
|
142 | ],
|
143 | declarations: [
|
144 | TestComponent,
|
145 | AppComponent
|
146 | ],
|
147 | bootstrap: [AppComponent]
|
148 | })
|
149 | export class AppModule {
|
150 |
|
151 | }
|
152 | ```
|
153 |
|
154 | 4. Use it in your components:
|
155 |
|
156 | ```html
|
157 | <summernote [(ngModel)]="text" [options]="options" [disabled]="disabled"></summernote>
|
158 | ```
|
159 |
|
160 | ---
|
161 | # Note:
|
162 |
|
163 | This module is based on [ng2-summernote](https://github.com/martinsvb/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.
|
164 |
|
165 |
|
\ | No newline at end of file |