RTL LTR Direction Buttons in Froala Editor V3

by Froala_marketing

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<div id="froala-editor">
  <p>Custom buttons for rtl and ltr.</p>
</div>

JavaScript

var changeDirection = function (dir, align) {
  // Wrap block tags.
  this.selection.save();
  this.html.wrap(true, true, true, true);
  this.selection.restore();

  // Get blocks.
  var elements = this.selection.blocks();

  // Save selection to restore it later.
  this.selection.save();

  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (element != this.el) {
      this.$(element)
        .css('direction', dir)
        .css('text-align', align)
        .removeClass('fr-temp-div');
    }
  }

  // Unwrap temp divs.
  this.html.unwrap();

  // Restore selection.
  this.selection.restore();
}

FroalaEditor.DefineIcon('rightToLeft', {NAME: 'arrow-left', template: 'font_awesome'});
FroalaEditor.RegisterCommand('rightToLeft', {
  title: 'RTL',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    changeDirection.apply(this, ['rtl', 'right']);
  }
})

FroalaEditor.DefineIcon('leftToRight', {NAME: 'arrow-right', template: 'font_awesome'});
FroalaEditor.RegisterCommand('leftToRight', {
  title: 'LTR',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    changeDirection.apply(this, ['ltr', 'left']);
  }
})

new FroalaEditor('div#froala-editor', {
  // Set custom buttons with separator between them. Also include the name
  // of the buttons  defined in customButtons.
  toolbarButtons: ['undo', 'redo' , 'bold', 'formatOL', 'formatUL', '|', 'rightToLeft', 'leftToRight'],
})