<button id="bold">Bold</button> <div id="editor"> <h1>Heading</h1> <p>Paragraph with <strong>strong</strong> text</p> </div> <script src="rangy.js"></script> <script src="rangy-classapplier.js"></script> <script src="texty.js"></script> <script> var editor = texty.init(document.getElementById('editor')); editor.addApplier('bold', { elementTagName: 'strong', removeClass: true }); document.getElementById('bold').addEventListener('click',function () { editor.getApplier('bold').toggle(); }); editor.init(); </script>

<div ng-controller="ExampleCtrl"> <div> <button ng-repeat="(applierName,applier) in editor.appliers" ng-click="applier.toggle()" ng-class="{ 'active':applier.is()}"> {{applierName}} </button> </div> <div texty="editor" html="html"> </div> {{editor}} </div> <script src="rangy.min.js"></script> <script src="texty.min.js"></script> <script src="angular.min.js"></script> <script src="texty-angular-adapter.js"></script> <script> var app = angular.module('textyExample', ['texty']); app.run(['textySvc', function (textySvc) { textySvc.addApplier('bold', { elementTagName: 'strong', removeClass: true }); }]); app.controller('ExampleCtrl', ['$scope', function ($scope) { $scope.html = "<h1>Heading</h1><p>Paragraph <strong>strong</strong></p>"; }]); angular.bootstrap(document, ['textyExample']); </script>