XF 2.2 Editor: new button on the uploaded image toolbar


Well-known member
Hello all :)
When you upload an image attachment on the Editor, if you click on the image, a small toolbar appears:

(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? :)
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) :
$('.js-editor').on('editor:config', function(e, editor)

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