Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Concepts

Make your own plugin

Below is the basic JS structure for creating your own plugin for Froala WYSIWYG HTML text editor.

(function ($) {
  // Add an option for your plugin.
  $.Editable.DEFAULTS = $.extend($.Editable.DEFAULTS, {
    myOption: false
  });

  $.Editable.prototype.initMyPlugin = function () {
    // The start point for your plugin.

    // You can access any option from documentation or your custom options.
    console.log (this.options.myOption)

    // You can call any method from documentation.
    // this.methodName(params)

    // You can register any event from documentation like this.
    // this.$original_element.on('editable.afterPaste', function (e, editor, params) {});
  }

  // Register your plugin.
  $.Editable.initializers.push($.Editable.prototype.initMyPlugin);
})(jQuery);

Add a button to the toolbar

// Define a toolbar button. It will be available in the buttons option.
$.Editable.commands = $.extend($.Editable.commands, {
  myButton: {
    title: 'My Button',
    icon: 'fa fa-magic',
    refresh: function () {
      // The button state might have been changed.
    },
    callback: function () {
      // Do something when the button is hit.
    },
    callbackWithoutSelection: function () {
      // Add this only if you want to handle the action differently when there is no selection.
    },
    undo: true // Enable only if it might affect the UNDO stack
  }
});

Add a dropdown to the toolbar

// Define a toolbar dropdown. It will be available in the buttons option.
$.Editable.commands = $.extend($.Editable.commands, {
  myDropdown: {
    title: 'My Dropdown',
    icon: 'fa fa-star',
    refresh: function () {
      // The button state might have been changed.
    },
    refreshOnShow: function () {
      // Triggered when the dropdown is shown.
    },
    callback: function () {
      // Do something when the button is hit.
    },
    undo: true // Enable only if it might affect the UNDO stack
  }

});

// Customize how your dropdown works.
$.Editable.prototype.command_dispatcher = $.extend($.Editable.prototype.command_dispatcher, {
  myDropdown: function (command) {
    // The HTML that appears in the dropdown.
    var dropdown = '
YOUR CUSTOM HTML
'; var btn = this.buildDropdownButton(command, dropdown, 'your-custom-button-class'); return btn; } });
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1765672562" 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_252641825" 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_1930534771" 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>