Buttons

Custom Buttons

Try it yourself:

Froala WYSIWYG HTML Editor covers a lot of functionalities through the default buttons. However, you might need buttons with another behavior to be integrated in the toolbar. This can be done by defining a custom command and then passing the command in the buttons list. More details about defining a custom command can be found in the Custom Button concept.

After defining custom buttons you need to add them to the toolbar buttons list, using the following options: toolbarButtons, toolbarButtonsMD, toolbarButtonsSM and toolbarButtonsXS as explained in the Custom Toolbar example.

Edit in JSFiddle

HTML

Copy

<div id="froala-editor">
  <p>You can see the new buttons added after the separator in the toolbar.</p>
</div>

JAVASCRIPT

Copy

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

  FroalaEditor.DefineIcon('clear', {NAME: 'remove', SVG_KEY: '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', SVG_KEY: 'add'});
  FroalaEditor.RegisterCommand('insert', {
    title: 'Insert HTML',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
      this.html.insert('My New HTML');
    }
  });

  new FroalaEditor('div#froala-editor', {
    // Add the custom buttons in the toolbarButtons list, after the separator.
    toolbarButtons: [['undo', 'redo' , 'bold'], ['alert', 'clear', 'insert']]
  })
</script>