Custom Elements

Bottom Toolbar Button

Below is the basic JS for creating a custom button for the bottom page toolbar.

// Define page edit button.
FroalaPages.Button.Register('myPageButton', {
title: 'My Page Button',
icon: {
type: 'svg',
template: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'
},
callback() {
// Wave the world.
alert('Hello World!');

// Show current page instance.
console.log(this.page);
},
refresh() {
// Change the state of the button.
this.el.classList.toggle('fp-active', true);
}
})

Note: Once a command is defined it can be included in the buttons options: pageLeftButtons, pageCenterButtons or pageRightButtons.