Custom 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

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

JAVASCRIPT

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