Basic Froala Editor jsFiddle

by froala

HTML

<script src="https://editor-latest.s3.amazonaws.com/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/css/froala_style.min.css">
<div class="edit">
  
</div>

JavaScript

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