README
ngx-wig
Dependencies
it's only Angular! No jQuery or other WYSIWYG monsters
Angular Support
For Angular 12 ngx-wig@12.0.0
For Angular 11 ngx-wig@11.0.0
For Angular 10 ngx-wig@10.0.0
For Angular 9 ngx-wig@9.0.0
Since Angular 8 we sync the version and now for each AngularX you will be able to use ngx-wig version X.
For Angular 7 ngx-wig@2.0.0
For Angular 6 ngx-wig@1.6.0
For Angular 4 and Angular = ^5 - use version ngx-wig@1.2.7
Icons
Icons are not in the pack! You can use the icons that you like. We recommend to use Material Design Icons
Installation
ngx-wig could be simply installed via npm:
npm install ngx-wig --save
Important note:
The last version on ngx-wig that was built for Angular 4.x is 0.3.6. Any higher version may be not fully compatible with Angular version lower than 5.0.0.
Usage
First, import the ngx-wig to your module:
import {NgxWigModule} from 'ngx-wig';
@NgModule({
imports: [ NgxWigModule ]
});
it's just attribute directive for textarea:
<link href="https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css" rel="stylesheet" />
...
<ngx-wig [content]="text1"></ngx-wig>
Examples
demo )
Quick start (<ngx-wig [content]="text1"></ngx-wig>
demo )
Placeholder (<ngx-wig [content]="text1" [placeholder]="'Enter instructions here.'"></ngx-wig>
demo )
ngModel sync (<ngx-wig [(ngModel)]="text1"></ngx-wig>
<ngx-wig [(ngModel)]="text1"></ngx-wig>
demo )
Set buttons (<ngx-wig [content]="text1" [buttons]="'bold, italic'"></ngx-wig>
demo )
onContentChange Hook (<ngx-wig [content]="text1" (contentChange)="result = $event"></ngx-wig>
<div [innerHTML]="result"></div>
demo )
Reactive FormControl (<ngx-wig [formControl]="text1"></ngx-wig>
demo )
Two-way binding (<ngx-wig [(ngModel)]="text1"></ngx-wig>
Adding own buttons
Please check an example here https://stackblitz.com/edit/ngx-wig-sample-plugins?file=src/app.ts
Development
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
To run all tests:
$ npm run test
License
MIT © Stepan Suvorov