Skip to content

Getting Started v1.1.x

SimeonC edited this page Feb 18, 2014 · 1 revision

Requirements

  1. AngularJS1.2.x, available at http://angularjs.org/
  2. Angular Sanitize1.2.x, available at http://angularjs.org/

Optional requirements

  1. Bootstrap 3.x for the default styles, available at http://getbootstrap.com/
  2. Font-Awesome 4.x for the default icons on the toolbar, available at http://fortawesome.github.io/Font-Awesome/

Usage

  1. Get textAngular via bower install textAngular, using the cdn at http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/text-angular.min.js or from the github page https://github.com/fraywing/textAngular/releases/latest
  2. Include textAngular.js or textAngular.min.js in your project using script tags
  3. Add a dependency to textAngular in your app module, for example: angular.module('myModule', ['textAngular']).
  4. Create an element to hold the editor and add an ng-model="htmlVariable" attribute where htmtlVariable is the scope variable that will hold the HTML entered into the editor:
<div text-angular ng-model="htmlVariable"></div>

OR

<text-angular ng-model="htmlVariable"></div>

This acts similar to a regular AngularJS / form input if you give it a name attribute, allowing for form submission and AngularJS form validation.

Lastly you will need a variant of the following CSS to ensure that the editor takes up a sensible amount of space on the page:

.ta-editor {
  min-height: 300px;
  height: auto;
  overflow: auto;
  font-family: inherit;
  font-size: 100%;
}

Have fun!

Important Note: Though textAngular supports the use of all attributes in it's input, please note that angulars ng-bind-html WILL strip out all of your style attributes.