Froala Editor Wrapper

froala.js

$.FroalaEditor.DefineIcon('alert', {NAME: 'info'});
$.FroalaEditor.RegisterCommand('alert', {
  title: 'Hello',
  focus: false,
  undo: false,
  refreshAfterCallback: false,
  callback: function () {
    alert('Hello!');
  }
});

$.FroalaEditor.DefineIcon('clear', {NAME: 'remove'});
$.FroalaEditor.RegisterCommand('clear', {
  title: 'Clear HTML',
  focus: false,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.set('');
    this.events.focus();
  }
});

$.FroalaEditor.DefineIcon('insert', {NAME: 'plus'});
$.FroalaEditor.RegisterCommand('insert', {
  title: 'Insert HTML',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    /* this.html.insert('<span style="bold"></'); */
        this.html.insert("<span class=\"highlight\">" + this.html.getSelected() + "</span>");

  }
});

$('div#froala-editor').froalaEditor({
  // Add the custom buttons in the toolbarButtons list, after the separator.
  toolbarButtons: ['undo', 'redo' , 'bold', '|', 'alert', 'clear', 'insert']
})