added ability to register custom buttons (issue 29)

[iaK]

This PR adds ability to register custom buttons, as discussed in issue 29

This is a quite tricky problem to solve, and this implementation is not that great. Using eval always feels dirty, and having to make the js file publicly available and fetching it with ajax also feels kinda gross, butt hopefully it will get the ball rolling and at least we have a starting point.

To register custom buttons. create a js file containing a function that receives a froala editor instance as its first parameter and make it publicly available on the server.

example:

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

Then, in your froala config file, add the following:

'customToolbarButtons' => [
    'alert' => '/js/alert.js',
],

And finally - add the button to your toolbarButtons array like any other button

That's all.

What do you think?

[iaK]

@slavarazum any response? :)

[slavarazum]

Hi,
Thanks for the implementation. Agreed with you that it's not enough clean as I'd want, but it may help to make new thoughts about solving this issue.

[iaK]

So what's the alternativs?

We can't get them in at build time, so they have to be picked up runtime.

Using imports would be optimal, but i guess we cant rely on all the browsers to support that. Or can we? https://caniuse.com/#feat=es6-module-dynamic-import
IE and edge would not be supported then.

We could also output the button-logic into the dom to be picked up by plugin.

[slavarazum]

For now dynamic imports are using to include Froala plugins, maybe we can use it for custom buttons.

[iaK]

Alright. I'll look into that