An AngularJS WYSIWYG directive that multiple instances and two-way data-binding.
$ git clone https://github.com/TerryMooreII/angular-wysiwyg.git $ npm install $ gulp server
Open browser to http://localhost:4000/demo
bower install angular-wysiwyg
Install each dependancy to your AngularJS project.
Add
'wysiwyg.module'to your main angular.module like so
javascript angular.module('myapp', ['myApp.controllers', 'myApp.services', 'wysiwyg.module']);`
Option |
Description |
---|---|
ng-model | REQUIRED - The angular data model |
textarea-id | The id to assign to the editable div |
textarea-class | The class(es) to assign to the the editable div |
textarea-height | If the height is not specified in a text-area class then the hight of the editable div (default: 80px) |
textarea-name | The name attribute of the editable div |
textarea-required | True/False HTML/AngularJS required validation |
enable-bootstrap-title | True/False whether or not to show the button hover title styled with bootstrap |
textarea-menu | Cusomize the wysiwyg buttons and button groups *See Below If nothing is specified then the default buttons and groups will be shown. |
disabled | Disable the buttons and wysiwig area |
If you don't need all of the buttons and functions of the default WYSIWYG editor you can customize it.
To do so you need to create a scope variable in your controller. This variable be an array that contains arrays of button groups.
//This also happens to be the default menu options. $scope.yourModel.customMenu = [ ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript'], ['format-block'], ['font'], ['font-size'], ['font-color', 'hilite-color'], ['remove-format'], ['ordered-list', 'unordered-list', 'outdent', 'indent'], ['left-justify', 'center-justify', 'right-justify'], ['code', 'quote', 'paragraph'], ['link', 'image'] ];
So above each array will end up being a group of the specified buttons.
Note: The
fontand
font-sizedropdowns must be in thier own group.
List of possible buttons |
---|
bold |
italic |
underline |
strikethrough |
subscript |
superscript |
font |
font-size |
font-color |
hilite-color |
remove-format |
ordered-list |
unordered-list |
outdent |
indent |
left-justify |
right-justify |
center-justify |
code |
paragraph |
quote |
link |
image |