Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Language

RTL LTR Direction Buttons

Try it yourself:


To change the toolbar's direction the direction option should be used.

Edit in JSFiddle

HTML

<div id="froala-editor">
  <p>Custom buttons for rtl and ltr.</p>
</div>

JAVASCRIPT

<script>
  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: 'long-arrow-left'});
  FroalaEditor.RegisterCommand('rightToLeft', {
    title: 'RTL',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
      changeDirection.apply(this, ['rtl', 'right']);
    }
  })

  FroalaEditor.DefineIcon('leftToRight', {NAME: 'long-arrow-right'});
  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'],
  })
</script>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_140634194" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1415291265" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_744976134" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>