textangular
Version:
A radically powerful Text-Editor/Wysiwyg editor for Angular.js
95 lines (86 loc) • 5.59 kB
HTML
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta name="fragment" content="!">
<meta name="author" content="Austin Anderson">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="contact" content="austin@rarebreedstudios.com">
<meta name="keywords" content="angularjs,angular.js,texteditor,text editor,Wysiwyg,javascript text editor,javascript Wysiwyg">
<meta name="copyright" content="Austin Anderson. All rights reserved">
<meta charset="utf-8">
<title>textAngular :: Lightweight Angular.js, Javascript Wysiwyg/Text-Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="author" href="https://www.linkedin.com/in/austinanderson1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,300">
<link rel="stylesheet" href="http://textangular.com/dist/textAngular.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js" type="text/javascript"></script>
<style>
textarea.ta-bind {
width: 100%;
}
</style>
<!-- enable this section or the non-minimized section below -->
<script src='../dist/textAngular-rangy.min.js'></script>
<script src='../dist/textAngular-sanitize.min.js'></script>
<script src='../dist/textAngular.min.js'></script>
<!-- non minimized version for ease of debugging
<script src='../dist/textAngular-rangy.min.js'></script>
<script src='../dist/textAngular-sanitize.js'></script>
<script src='../dist/textAngular.js'></script>
<script src='../dist/textAngularSetup.js'></script>
-->
</head>
<body>
<div id="ng-app" ng-app="textAngularDemo" ng-controller="demoController" class="ng-scope">
<br>
<div class="container">
<a href="http://github.com/fraywing/textAngular"> <img src="http://textangular.com/images/textAngularLogo.png" style="max-width:500%;" class="lighter"></a>
<span text-angular-version style="font-size:20px; position:relative; top:26px;">
</div>
<br>
<div class="container border-around text-center lighter">
<span class="text-xlg roboto">A Lightweight, Two-Way-Bound & Totally <b class="text-red">Awesome</b> Angular.js Text-Editor</span>
</div>
<div class="container lighter">
<div text-angular ng-model="htmlContent" name="demo-editor" ta-text-editor-class="clearfix border-around container" ta-html-editor-class="border-around"></div>
</div>
<br>
<div class="container text-center lighter border-around">
<div class="lighter roboto">
<p ng-bind="htmlContent" class="text-left text-med text-gray"></p>
</div>
</div>
<br>
<div class="container text-right">
<span class="well btn-md"><b>//cdnjs.cloudflare.com/ajax/libs/textAngular/{{versionNumber}}/textAngular.min.js</b></span>
<a href="https://github.com/fraywing/textAngular/archive/{{version}}.zip" class="btn btn-danger btn-lg">
<div><i class="icon-arrow-down"> </i><span>Download {{version}}</span></div>
</a>
</div>
<br>
<div class="container border-around text-center lighter">
<iframe src="http://ghbtns.com/github-btn.html?user=fraywing&repo=textAngular&type=watch&size=large&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="220" height="30"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=fraywing&repo=textAngular&type=fork&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="180" height="30"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=fraywing&repo=textAngular&type=follow&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="180" height="30"></iframe>
</div>
<br>
<div class="container">
<div class="text-center">Create by fraywing</div>
<div class="text-center">2015 Licensed under <a href="http://opensource.org/licenses/MIT">MIT</a></div>
</div>
<br>
</div>
<script type="text/javascript">
angular.module("textAngularDemo", ['textAngular'])
.controller("demoController", ['$scope', 'textAngularManager', function demoController($scope, textAngularManager) {
$scope.version = textAngularManager.getVersion();
$scope.versionNumber = $scope.version.substring(1);
$scope.htmlContent = '<h2>Try me!</h2><p>textAngular is a super cool WYSIWYG Text Editor directive for AngularJS</p><p><b>Features:</b></p><ol><li>Automatic Seamless Two-Way-Binding</li><li style="color: blue;">Super Easy <b>Theming</b> Options</li><li>Simple Editor Instance Creation</li><li>Safely Parses Html for Custom Toolbar Icons</li><li>Doesn't Use an iFrame</li><li>Works with Firefox, Chrome, and IE9+</li></ol><p><b>Code at GitHub:</b> <a href="https://github.com/fraywing/textAngular">Here</a> </p>';
}]);
</script>
</body>
</html>