Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

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>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_52257816" 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_21250120" 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_4868488" 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>