Code Monkey home page Code Monkey logo

angular-wysiwyg's Introduction

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

angular-wysiwyg's People

Contributors

bjcull avatar khasinski avatar mitgath avatar terrymooreii avatar vitaliy-mishur avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.