The textAngular is a fascinating tool for HTML Text Editor using AngularJS framework. This provides a lots of features in HTML text editing, few of them are listed below.
Include the script tag similar to the following,
Your js file should be like this,
- Two Way Data Binding
- Easy Setting Up the Editor
- Styling the Editor
- Customising the Toolbar
- Toggle HTML / Rich Text
- Works with browsers like Chrome, Firefox, and IE8+
- Very Important Does not use an iFrame.
Include the script tag similar to the following,
<script src='https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.4.2/dist/textAngular.min.js'></script>
var myApp = angular.module('MyApp', ['textAngular']);
This creates a dependency to textAngular in your app module.
Next Step, you have to create an html element that holds the editor and add an ng-model="variable" attribute where "variable" is the scope variable that will hold the HTML entered into the editor:
<div text-angular ng-model="variable"></div>
OR
<text-angular ng-model="variable"></text-angular>
This acts similar to regular AngularJS / form input if you give it a name attribute, allowing for form submission and AngularJS form validation.
The textAngular output is,
You can customize this toolbar options by adding "taOptions" to your angular controller js file.
myApp.controller('EasyEditor',['$scope','taOptions', function($scope,taOptions){ taOptions.toolbar = [
['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'quote'],
['bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo', 'clear'],
['justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent'],
['html', 'insertImage','insertLink', 'insertVideo']
];}]);
HTML Output:
<h1 style="text-align: center;"><b>Best Tool Ever!</b></h1><div><p>Try this tool.</p></div>
Comments