https://github.com/stevermeister/ngwig

simple WYSIWYG editor for AgularJS, for Angular2+ please use - https://github.com/stevermeister/ngx-wig
https://github.com/stevermeister/ngwig

Last synced: 9 months ago
JSON representation

simple WYSIWYG editor for AgularJS, for Angular2+ please use - https://github.com/stevermeister/ngx-wig

• Host: GitHub
• URL: https://github.com/stevermeister/ngwig
• Owner: stevermeister
• License: mit
• Created: 2014-07-13T09:15:28.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2024-01-09T23:49:38.000Z (about 2 years ago)
• Last Synced: 2025-04-09T15:09:46.670Z (9 months ago)
• Language: JavaScript
• Homepage: http://stevermeister.github.io/ngWig/
• Size: 1.62 MB
• Stars: 113
• Watchers: 8
• Forks: 61
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
ngWig

=====

## Dependencies

*it's only AngularJS! No jQuery or other WYSIWYG monsters*

 - ng-wig2+ - Angular1.3+

 - ng-wig3+ - Angular1.5+

 

 Also suports latest Angular1.7.8

## Usage

    angular.module('yourApp', ['ngWig'])

it's just attribute directive for textarea:

    

    

    

## Sanitization    

**Important:** ngWig is light weight solution that **does not include sanitization module**. So it's your own responsiblity to be sure that content that you placed there is already checked and does not have any possible injections.

Credits to [@MacJu](https://github.com/MacJu) for highlighting the issue.

## 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.jsdelivr.net/gh/stevermeister/ngWig@master/dist/ng-wig.min.js

    https://cdn.jsdelivr.net/gh/stevermeister/ngWig@master/dist/ng-wig.js

    https://cdn.jsdelivr.net/gh/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)](http://stevermeister.github.io/ngWig/demo/)

## Examples

### Quick start ([plunker](https://plnkr.co/edit/IaTeHRUdWU1WUJnUiftl?p=preview))

    

### Disabled ([plunker](https://plnkr.co/edit/og1wRflbWfqyC8S4edzs?p=preview))

    

### Edit Source option ([plunker](https://plnkr.co/edit/JVOI2l2gnZMKORMWjAEZ?p=preview))

    

### Placeholder ([plunker](https://plnkr.co/edit/yXZkpyHcb47rbXfTHs31?p=preview))

    

### ngModel sync ([plunker](https://plnkr.co/edit/8owI0CDjoos8DArlc10g?p=preview))

    

    

### Set buttons ([plunker](https://plnkr.co/edit/9Fjqwnf74jJAKNx2cMYI?p=preview))

    

### Setup generic buttons ([plunker](https://plnkr.co/edit/XteWPwo0eQ1gz4L6cpDr?p=preview))

    .config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {

      ngWigToolbarProvider.setButtons(['bold', 'italic']);

    }]);

### Add standard buttons ([plunker](https://plnkr.co/edit/Avi90RnnoTPGWzosQHQo?p=preview))

    .config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {

      ngWigToolbarProvider.addStandardButton('underline', 'Underline', 'underline', 'fa-underline');

    }]);

### Add custom button (plugin) ([plunker](https://plnkr.co/edit/Ik2fmPzDu6ecifUqVICv?p=preview))

- Javascript:

        angular.module('ngWig').config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {

            ngWigToolbarProvider.addCustomButton('my-custom', 'nw-my-custom-button');

        }])

        .component('nwMyCustomButton', {

            template: 'My Custom Button',

            controller: function() {

                this.click = function(){

                    alert('My Custom Button');

                };

            }

        });

- CSS:

        .nw-button.my-custom:before {

            content: '\f1b3';

        }

### OnPaste Hook ([plunker](https://plnkr.co/edit/dsvfoDZw8CPVrNo9R6Bv?p=preview))

        

### Formats (plugin) ([plunker](https://plnkr.co/edit/TgKThPQjlG4ctzGYk6Kq?p=preview))

        

### Forecolor (plugin) ([plunker](https://plnkr.co/edit/2hmkjBJHs7tTyOU7TDIH?p=preview))

        

### Clear Styles (plugin) ([plunker](https://plnkr.co/edit/j8FtcMAVkLSztZ6V0ION?p=preview))

        

## Contribution (Development Setup)

    npm install

    npm run devSetup

## Creating plugins