angular-wysiwyg

by TerryMooreII

TerryMooreII / angular-wysiwyg

An AngularJS WYSIWYG directive that multiple instances and two-way data-binding.

123 Stars 80 Forks Last release: Not found MIT License 67 Commits 13 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

I have not had time to update this project in a long time which has caused me to fall behind on many bugs listed in the issues page. If you still depend on this project and would like to contribute please let me know or submit pull requests.

Angular WYSIWYG directive.

Awesome Shot

Pull Requests Welcome

Demo

$ git clone https://github.com/TerryMooreII/angular-wysiwyg.git
$ npm install 
$ gulp server

Open browser to http://localhost:4000/demo

Installation

bower install angular-wysiwyg

Required dependancies

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']);
`

Usage


Options

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

Buttons

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

font
and
font-size
dropdowns 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.