How can I add buttons for H1 and H2 in the editor toolbar?

Question:

How can I add heading buttons in the toolbar? For example: heading 1, heading 2.

Answer:

Definitely, you could use a custom button to create a button similar to the bold or italic one. Below is a quick snippet for doing it and a jsFiddle can be found here: https://jsfiddle.net/froala/zahsdkem/.

var buttons = ['bold', 'italic', 'h1', 'h2'];

// Check if button is active.
var isActive = function (cmd) {
  var blocks = this.selection.blocks();

  if (blocks.length) {
    var blk = blocks[0];
    var tag = 'N';
    var default_tag = this.html.defaultTag();
    if (blk.tagName.toLowerCase() != default_tag && blk != this.el) {
      tag = blk.tagName;
    }
  }

  if (['LI', 'TD', 'TH'].indexOf(tag) >= 0) {
    tag = 'N';
  }
  
  return tag.toLowerCase() == cmd;
}

// Define custom buttons.
$.FroalaEditor.DefineIcon('h1', {NAME: '<strong>H1</strong>', template: 'text'});
$.FroalaEditor.DefineIcon('h2', {NAME: '<strong>H2</strong>', template: 'text'});
$.FroalaEditor.RegisterCommand('h1', {
  title: 'Heading 1',
  callback: function (cmd, val, params) {
    if (isActive.apply(this, [cmd])) {
      this.paragraphFormat.apply('N');
    }
    else {
      this.paragraphFormat.apply(cmd);
    }
  },
  refresh: function ($btn) {
    $btn.toggleClass('fr-active', isActive.apply(this, [$btn.data('cmd')]));
  }
});

$.FroalaEditor.RegisterCommand('h2', {
  title: 'Heading 2',
  callback: function (cmd, val, params) {
    if (isActive.apply(this, [cmd])) {
      this.paragraphFormat.apply('N');
    }
    else {
      this.paragraphFormat.apply(cmd);
    }
  },
  refresh: function ($btn) {
    $btn.toggleClass('fr-active', isActive.apply(this, [$btn.data('cmd')]));
  }
});

$('.edit').froalaEditor({
  toolbarButtonsSM: buttons,
  toolbarButtonsMD: buttons,
  toolbarButtonsXS: buttons,
  toolbarButtons: buttons
})