It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
Examples
RTL LTR Direction Buttons
Custom buttons for rtl and ltr.
HTML
<div id="eg-rtl-ltr-buttons" class="text-small"> <p>Custom buttons for rtl and ltr.</p> </div>
JAVASCRIPT
<script> $(function() { var changeDirection = function (dir, align) { this.saveSelectionByMarkers(); var elements = this.getSelectionElements(); for (var i = 0; i < elements.length; i++) { var element = elements[i]; if (element != this.$element.get(0)) { $(element) .css('direction', dir) .css('text-align', align); } } this.restoreSelectionByMarkers(); this.saveUndoStep(); } $('div#eg-rtl-ltr-buttons').editable({ inlineMode: false, // Set custom buttons with separator between them. Also include the name // of the buttons defined in customButtons. buttons: ['undo', 'redo' , 'bold', 'sep', 'rightToLeft', 'leftToRight'], // Define custom buttons. customButtons: { // Right to left button. rightToLeft: { title: 'RTL', icon: { type: 'font', value: 'fa fa-long-arrow-left' // Font Awesome icon class fa fa-* }, callback: function () { changeDirection.apply(this, ['rtl', 'right']); } }, // Left to right button. leftToRight: { title: 'LTR', icon: { type: 'font', value: 'fa fa-long-arrow-right' // Font Awesome icon class fa fa-* }, callback: function () { changeDirection.apply(this, ['ltr', 'left']); } } } }) }); </script>