Folks, for your judgement and, hopefully, contributions, here is the true angular WYSIWYG. I took images and layout from the tinyeditor, so kudos to Michael Leigeber.
Here is the Demo
A real rich text editor must reflect the true stage of the editing content. Any CSS and/or Javascript on the host page must not overide the specifics of the content. Moreover, iframe allows to issolate your security issues (any possible Javascript code in the content may polute your window's scope).
AngularJS
≥1.2.x
Angular Sanitize
≥1.2.x
$ bower install ngWYSIWYG --save
```
Include the ngWYSIWYG files in your index.html:
````HTML
<link rel="stylesheet" href="bower_components/ngWYSIWYG/css/editor.css" />
<script src="bower_components/ngWYSIWYG/js/wysiwyg.js"></script>
```
Add it as module to your app.js:
````JavaScript
['ngWYSIWYG']
Use it wherever you want:
<wysiwyg-edit content="your_variable"></wysiwyg-edit>
You can configure the editor for two options (will extend l8r). First option is if you want to sanitize input from the user and prevent XSS attacks. This option uses angular's $sanitize. The second option will allow to configure toolbar buttons. You will be able to configure which buttons you want to show. Please see example.
angular.module('myApp', ['ngWYSIWYG']).
controller('demoController', ['$scope', '$q', '$timeout', function($scope, $q, $timeout) {
$scope.your_variable = 'some HTML text here';
$scope.api = {
scope: $scope,
$scope.editorConfig = {
sanitize: false,
toolbar: [
{ name: 'basicStyling', items: ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', '-', 'leftAlign', 'centerAlign', 'rightAlign', 'blockJustify', '-'] },
{ name: 'paragraph', items: ['orderedList', 'unorderedList', 'outdent', 'indent', '-'] },
{ name: 'doers', items: ['removeFormatting', 'undo', 'redo', '-'] },
{ name: 'colors', items: ['fontColor', 'backgroundColor', '-'] },
{ name: 'links', items: ['image', 'hr', 'symbols', 'link', 'unlink', '-'] },
{ name: 'tools', items: ['print', '-'] },
{ name: 'styling', items: ['font', 'size', 'format'] },
]
};
};
}]);
<wysiwyg-edit content="your_variable" config="editorConfig"></wysiwyg-edit>
There is an idea on the api functions to delegate some responsibilities to the customer's scope. The first thing which is implemented is insert image delegation. By default the directive uses a simple prompt function to accept image's url. However, there is a way to bring up a custom dialog box on the customer's side and return promise.
angular.module('myApp', ['ngWYSIWYG']).
controller('demoController', ['$scope', '$q', '$timeout', function($scope, $q, $timeout) {
$scope.your_variable = 'some HTML text here';
$scope.api = {
scope: $scope,
$scope.editorConfig = {
sanitize: false,
toolbar: [
{ name: 'basicStyling', items: ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', '-', 'leftAlign', 'centerAlign', 'rightAlign', 'blockJustify', '-'] },
{ name: 'paragraph', items: ['orderedList', 'unorderedList', 'outdent', 'indent', '-'] },
{ name: 'doers', items: ['removeFormatting', 'undo', 'redo', '-'] },
{ name: 'colors', items: ['fontColor', 'backgroundColor', '-'] },
{ name: 'links', items: ['image', 'hr', 'symbols', 'link', 'unlink', '-'] },
{ name: 'tools', items: ['print', '-'] },
{ name: 'styling', items: ['font', 'size', 'format'] },
]
};
insertImage: function() {
var deferred = $q.defer();
$timeout(function() {
var val = prompt('Enter image url', 'http://');
if(val) {
deferred.resolve('<img src="' + val + '" style="width: 30%;">');
}
else {
deferred.reject(null);
}
}, 1000);
return deferred.promise;
}
};
}]);
Make sure you feed the api object to the directive like this:
<wysiwyg-edit content="your_variable" api="api"></wysiwyg-edit>
- Include wysiwyg.js in your project using script tags.
- Add dependency to
ngWYSIWYG
to your app module. Example:angular.module('myApp', ['ngWYSIWYG'])
. - Add element
<wysiwyg-edit content="your_variable"></wysiwyg-edit>
.
- Current cursor/caret position style reflection on the toolbar
- Material Design
- Implement tests
- Look for the Angular 2.0
If you find any, please let me know by sumbitting an issue request. I will be working on it actively.
Contributions are welcome and special thanks to all the contributions!