ngWig

WebJar for ngWig

License	MIT
GroupId	org.webjars.bower
ArtifactId	ng-wig
Last Version	1.1.2
Release Date	May 7, 2015
Type	jar
Description	ngWig WebJar for ngWig
Project URL	http://webjars.org
Source Code Management	https://github.com/stevermeister/ngWig

Download ng-wig

Filename	Size
ng-wig-1.1.2.pom
ng-wig-1.1.2.jar	40 KB
ng-wig-1.1.2-sources.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/ng-wig/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>ng-wig</artifactId>
    <version>1.1.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/ng-wig/
implementation 'org.webjars.bower:ng-wig:1.1.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/ng-wig/
implementation ("org.webjars.bower:ng-wig:1.1.2")

Apache Buildr

'org.webjars.bower:ng-wig:jar:1.1.2'

Apache Ivy

<dependency org="org.webjars.bower" name="ng-wig" rev="1.1.2">
  <artifact name="ng-wig" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='ng-wig', version='1.1.2')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "ng-wig" % "1.1.2"

Leiningen

[org.webjars.bower/ng-wig "1.1.2"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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:

<ng-wig ng-model="text1"></ng-wig>

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

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)

    <ng-wig ng-model="text1" buttons="formats"></ng-wig>

Forecolor (plugin) (plunker)

    <ng-wig ng-model="text1" buttons="forecolor"></ng-wig>

Clear Styles (plugin) (plunker)

    <ng-wig ng-model="text1" buttons="clear-styles"></ng-wig>

Contribution (Development Setup)

npm install
npm run devSetup

Creating plugins

Versions

Version
1.1.2 May 7, 2015