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;
  }
});