##Dependencies
it's only AngularJS! No jQuery or other WYSIWYG monsters
- ng-wig2+ - Angular1.3+
- ng-wig3+ - Angular1.5+
Also suports latest Angular1.6
##Usage
angular.module('yourApp', ['ngWig'])
it's just attribute directive for textarea:
<ng-wig ng-model="text1"></ng-wig>
##Installation
ngWig could be simply installed via npm:
npm install ng-wig
or via bower:
bower install ng-wig
##CDN
https://cdnjs.cloudflare.com/ajax/libs/ng-wig/3.0.14/ng-wig.min.js
https://cdnjs.cloudflare.com/ajax/libs/ng-wig/3.0.14/ng-wig.js
https://cdnjs.cloudflare.com/ajax/libs/ng-wig/3.0.14/css/ng-wig.css
##Always last version CDN https://cdn.rawgit.com/stevermeister/ngWig/master/dist/ng-wig.min.js
https://cdn.rawgit.com/stevermeister/ngWig/master/dist/ng-wig.js
https://cdn.rawgit.com/stevermeister/ngWig/master/dist/css/ng-wig.css
[Demo] (http://stevermeister.github.io/ngWig/demo/)
![Screenshot] (http://stevermeister.github.io/ngWig/images/ng-wig-demo.png)
##Examples
Quick start (plunker)
<ng-wig ng-model="text1"></ng-wig>
###Disabled (plunker)
<ng-wig ng-model="text1" ng-disabled="true"></ng-wig>
###Edit Source option (plunker)
<ng-wig ng-model="text1" source-mode-allowed></ng-wig>
###Placeholder (plunker)
<ng-wig ng-model="text1" placeholder="'Enter instructions here.'"></ng-wig>
###ngModel sync (plunker)
<ng-wig ng-model="text1"></ng-wig>
<ng-wig ng-model="text1"></ng-wig>
###Set buttons (plunker)
<ng-wig ng-model="text1" buttons="formats, bold, italic"></ng-wig>
###Setup generic buttons (plunker)
.config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
ngWigToolbarProvider.setButtons(['bold', 'italic']);
}]);
###Add standard buttons (plunker)
.config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
ngWigToolbarProvider.addStandardButton('underline', 'Underline', 'underline', 'fa-underline');
}]);
###Add custom button (plugin) (plunker)
-
Javascript:
angular.module('ngWig').config(['ngWigToolbarProvider', function(ngWigToolbarProvider) { ngWigToolbarProvider.addCustomButton('my-custom', 'nw-my-custom-button'); }]) .component('nwMyCustomButton', { template: '<button class="nw-button my-custom" title="My Custom Button" ng-click="$ctrl.click()">My Custom Button</button>', controller: function() { this.click = function(){ alert('My Custom Button'); }; } });
-
CSS:
.nw-button.my-custom:before { content: '\f1b3'; }
###OnPaste Hook (plunker)
<ng-wig ng-model="text1" on-paste="onPaste($event, pasteContent)"></ng-wig>
###Formats (plugin) (plunker)
###Forecolor (plugin) (plunker)
###Clear Styles (plugin) (plunker)
npm install
npm run devSetup