XF 2.2 Editor: new button on the uploaded image toolbar

Scandal

Active member
Hello all :)
When you upload an image attachment on the Editor, if you click on the image, a small toolbar appears:
buttons.png

(Aligment - Change Size - Alt text | Replace - Remove - Insert link)

My question: how could I add a new button on this toolbar? I need a link button with data-xf-click="overlay".
I understand that this toolbar was built with javascript, but I'm not sure how to extend it via my custom addon.
Any idea for <xf:js> code or something similar to extend? :)
 

Scandal

Active member
ok, found the solution by myself :)
Just for anyone interested, we have to run this javascript (it is just a sample to get the idea) :
JavaScript:
$('.js-editor').on('editor:config', function(e, editor)
{
    editor.imageEditButtons.push('MyButton');
});  

(function ($, window, document)
{
    "use strict";

    $(document).on('editor:first-start', function ()
    {
        $.FE.DefineIcon('MyButton', { NAME: 'check' });
        $.FE.RegisterCommand('MyButton', {
            title: 'My Button',
            icon: 'MyButton',
            undo: true,
            focus: true,
            callback: function ()
            {
                // Do cool stuff here!
            }
        });

    });

})
(jQuery, window, document);
 
Top