Getting Started

textAngular v1.4

Demo is available at: http://www.textangular.com

Requirements

1. AngularJS ≥ 1.3.x ;
2. textAngular-Sanitize This is a fork of Angular Sanitize v1.2.x. The standard Angular Sanitize strips out some attributes that it shouldn't in the case of textAngular. Note: With release ≥ 1.4.3, taOptions.forceTextAngularSanitize defaults to true, which enforces this requirement. Setting this to false allows textAngular-Sanitize to be replaced with a more specialized sanitize provider.

Optional requirements

1. Bootstrap 3.x for the default styles
2. Font-Awesome 4.x for the default icons on the toolbar
3. Rangy 1.3.x for better activeState detection and more dynamic plugins, also the selectionsaverestore module.

Usage

1. Get textAngular via bower install textAngular, using the cdn at https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.4.2/dist/textAngular.min.js or from the github page https://github.com/fraywing/textAngular/releases/latest

2. Include textAngular-sanitize.js or angular-sanitize.min.js in your project using script tags

3. Include textAngular.js and textAngular-setup.js or textAngular.min.js in your project using script tags

4. Include the following in your CSS as a starting point, this helps with displaying the editor in a sensible fashion:

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

5. Add a dependency to textAngular in your app module, for example: angular.module('myModule', ['textAngular']).

6. 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 (Only in Non IE browsers)

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

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

To display your content in a non-editable way use the following code, this renders the html after passing it through our custom renderers that allow certain elements like iFrames that can be difficult to edit around to be edited as a placeholder and then rendered as they should be displayed.

<div ta-bind ng-model="htmlVariable"></div>

Have fun!