-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Getting Started v1.1.x
SimeonC edited this page Feb 18, 2014
·
1 revision
-
AngularJS
≥1.2.x
, available at http://angularjs.org/ -
Angular Sanitize
≥1.2.x
, available at http://angularjs.org/
-
Bootstrap 3.x
for the default styles, available at http://getbootstrap.com/ -
Font-Awesome 4.x
for the default icons on the toolbar, available at http://fortawesome.github.io/Font-Awesome/
- 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 - Include textAngular.js or textAngular.min.js in your project using script tags
- Add a dependency to
textAngular
in your app module, for example:angular.module('myModule', ['textAngular'])
. - Create an element to hold the editor and add an
ng-model="htmlVariable"
attribute wherehtmtlVariable
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.