<html>

<head>

  <meta charset="UTF-8">

  <title>textAngular 1.1.2 Demo</title>

  <meta name="robots" content="noindex">

  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css'>

</head>

<body>

<div ng-app="textAngularTest" ng-controller="wysiwygeditor" class="container app">
  <h3>Editor</h3>
  <button ng-click="disabled = !disabled" unselectable>Disable text-angular Toggle</button>
  <div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled='disabled'></div>
  <h3>Raw HTML in a text area</h3>
  <textarea ng-model="htmlcontent" style="width: 100%"></textarea>
  <h3>Bound with ng-bind-html</h3>
  <div ng-bind-html="htmlcontent"></div>
  <h3>Bound with ta-bind, our internal html-binding directive</h3>
  <div ta-bind="text" ng-model="htmlcontent" ta-readonly='disabled'></div>
  <button type="button" ng-click="htmlcontent = orightml">Reset</button>
  <p>Note: although we support classes and styles, angularjs' ng-bind-html directive will strip out all style attributes.</p>
  
  <h3>Option to masquerade as a fancy text-area - complete with form submission and optional ngModel</h3>
  <text-angular name="htmlcontent"><p>Any <b>HTML</b> we put in-between the text-angular tags gets automatically put into the editor if there <strong style="font-size: 12pt;"><u><em>is not</em></u></strong> a ngModel</p></text-angular>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js'></script>

</body>

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

  angular.module("textAngularTest", ['textAngular']);
  function wysiwygeditor($scope) {
    $scope.orightml = '<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>Super Easy <b>Theming</b> Options</li><li style="color: green;">Simple Editor Instance Creation</li><li>Safely Parses Html for Custom Toolbar Icons</li><li class="text-danger">Doesn&apos;t Use an iFrame</li><li>Works with Firefox, Chrome, and IE8+</li></ol><p><b>Code at GitHub:</b> <a href="https://github.com/fraywing/textAngular">Here</a> </p>';
    $scope.htmlcontent = $scope.orightml;
    $scope.disabled = false;
  };

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.