examples

Examples

Fully working example can be found in the exmaple directory. After Build you can run the examples.

• DOM
• angular.js
• jquery

DOM:

<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>

angularjs

<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>

jQuery

Coming soon.