/ngWig

simple WYSIWYG editor for AgularJS

Primary LanguageJavaScriptMIT LicenseMIT

ngWig

##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)

Contribution (Development Setup)

npm install
npm run devSetup

Creating plugins