simple WYSIWYG editor for AgularJS, for Angular2+ please use - https://github.com/stevermeister/ngx-wig
MIT License
it's only AngularJS! No jQuery or other WYSIWYG monsters
Also suports latest Angular1.7.8
angular.module('yourApp', ['ngWig'])
it's just attribute directive for textarea:
<ng-wig ng-model="text1"></ng-wig>
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.
ngWig could be simply installed via npm:
npm install ng-wig
or via bower:
bower install ng-wig
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
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/)
<ng-wig ng-model="text1"></ng-wig>
<ng-wig ng-model="text1" ng-disabled="true"></ng-wig>
<ng-wig ng-model="text1" source-mode-allowed></ng-wig>
<ng-wig ng-model="text1" placeholder="'Enter instructions here.'"></ng-wig>
<ng-wig ng-model="text1"></ng-wig>
<ng-wig ng-model="text1"></ng-wig>
<ng-wig ng-model="text1" buttons="formats, bold, italic"></ng-wig>
.config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
ngWigToolbarProvider.setButtons(['bold', 'italic']);
}]);
.config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
ngWigToolbarProvider.addStandardButton('underline', 'Underline', 'underline', 'fa-underline');
}]);
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';
}
<ng-wig ng-model="text1" on-paste="onPaste($event, pasteContent)"></ng-wig>
<ng-wig ng-model="text1" buttons="formats"></ng-wig>
<ng-wig ng-model="text1" buttons="forecolor"></ng-wig>
<ng-wig ng-model="text1" buttons="clear-styles"></ng-wig>
npm install
npm run devSetup