stevermeister / Ngwig
Licence: mit
simple WYSIWYG editor for AgularJS, for Angular2+ please use - https://github.com/stevermeister/ngx-wig
Stars: ✭ 113
Programming Languages
javascript
184084 projects - #8 most used programming language
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/[email protected]/dist/ng-wig.min.js
https://cdn.jsdelivr.net/gh/stevermeister/[email protected]/dist/ng-wig.js
https://cdn.jsdelivr.net/gh/stevermeister/[email protected]/dist/css/ng-wig.css
[Demo] (http://stevermeister.github.io/ngWig/demo/)
![Screenshot] (http://stevermeister.github.io/ngWig/images/ng-wig-demo.png)
Examples
plunker)
Quick start (<ng-wig ng-model="text1"></ng-wig>
plunker)
Disabled (<ng-wig ng-model="text1" ng-disabled="true"></ng-wig>
plunker)
Edit Source option (<ng-wig ng-model="text1" source-mode-allowed></ng-wig>
plunker)
Placeholder (<ng-wig ng-model="text1" placeholder="'Enter instructions here.'"></ng-wig>
plunker)
ngModel sync (<ng-wig ng-model="text1"></ng-wig>
<ng-wig ng-model="text1"></ng-wig>
plunker)
Set buttons (<ng-wig ng-model="text1" buttons="formats, bold, italic"></ng-wig>
plunker)
Setup generic buttons (.config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
ngWigToolbarProvider.setButtons(['bold', 'italic']);
}]);
plunker)
Add standard buttons (.config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
ngWigToolbarProvider.addStandardButton('underline', 'Underline', 'underline', 'fa-underline');
}]);
plunker)
Add custom button (plugin) (-
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'; }
plunker)
OnPaste Hook ( <ng-wig ng-model="text1" on-paste="onPaste($event, pasteContent)"></ng-wig>
plunker)
Formats (plugin) ( <ng-wig ng-model="text1" buttons="formats"></ng-wig>
plunker)
Forecolor (plugin) ( <ng-wig ng-model="text1" buttons="forecolor"></ng-wig>
plunker)
Clear Styles (plugin) ( <ng-wig ng-model="text1" buttons="clear-styles"></ng-wig>
Contribution (Development Setup)
npm install
npm run devSetup
Creating plugins
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].