• Stars
    star
    121
  • Rank 292,855 (Top 6 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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] (https://raw.github.com/TerryMooreII/angular-wysiwyg/master/screenshots/screenshot.png)

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

angular.module('myapp', ['myApp.controllers', 'myApp.services', 'wysiwyg.module']);

Usage

<wysiwyg textarea-id="question" textarea-class="form-control"  textarea-height="80px" textarea-name="textareaQuestion" textarea-required ng-model="yourModel.model" enable-bootstrap-title="true" textarea-menu="yourModel.customMenu"></wysiwyg>

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

More Repositories

1

angular-azure-mobile-service

An AngularJS service to interact with the Azure Mobile Service Client.
JavaScript
68
star
2

materialize-social

Social Login Buttons for MaterializeCSS
HTML
50
star
3

vue-zondicons

Vue.js component for accessing Zondicon svg icons
Vue
19
star
4

HackerNode

HackerNews Terminal Viewer
JavaScript
5
star
5

vuedocs

Vue Docs is the web site for a curated list of VueJS related documents
Vue
4
star
6

GifStopper

Chrome Extension to stop animated gif images with the escape key.
JavaScript
4
star
7

Reddit-Hover-Craft

This will open a jQuery popup dialog displaying images when you hover over img links on Reddit
JavaScript
3
star
8

BusterRadio

Buster Radio
Vue
2
star
9

mediacenterjs-plugin-generator

Generator script to stream line creation of MediacenterJS plugins.
JavaScript
2
star
10

mediacenterjs-vimeo

Vimeo plugin for Mediacenterjs
JavaScript
2
star
11

Run-On-Top

An utility the will keep a Windows application running on top of other applications.
1
star
12

nhl-cli

Get NHL standings and scores on the command line
JavaScript
1
star
13

karma-plusplus

Karma++ Slack App
JavaScript
1
star
14

mediacenterjs-plugin-template

A template repository for MediacenterJS plugins
JavaScript
1
star
15

iTerry

My iGoogle Replacement
PHP
1
star
16

family-contact-list

Node, hapi, mongo, and angular app to keep track of contacts
JavaScript
1
star
17

Phish.net-Python-Wrapper

Wrapper to get data from the Phish.net API
Python
1
star
18

Jambase-Show-Finder

Google Chrome Extension to find shows on Jambase.com
JavaScript
1
star
19

fightingmoosekuckles

TypeScript
1
star
20

TWiPP

iPhone interface for Tracewatch
PHP
1
star