Add Custom Button in User JavaScript for MediaWiki

Question

I want to create a button like the one that inserts your signature. How to do this?

After doing some research I figured out that I can insert custom buttons with the User:MYUSERNAME/common.js page.

I saw several examples. But the wiki references and informations are often splittet across multiple pages and out dated. So I try here if I am lucky and find someone who tried similar things.

Who can help me with this:

var customizeToolbar = function() {
    $('#wpTextbox1').wikiEditor('addToToolbar', {
        section: 'advanced',
        group: 'format',
        tools: {
            "comment": {
                label: 'Comment',
                type: 'button',
                icon: '//upload.wikimedia.org/wikipedia/commons/3/37/Btn_toolbar_commentaire.png',
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: "<!-- ",
                        post: " -->"
                    }
                }
            }
        }
    });
};

When I do it like this, nothing happens because customizeTooblar most likely gets never called. When I remove it, it says that wikiEditor is not defined.

I already enabled $wgAllowUserJs = true; in LocalSettings.php.

I saw this question: Creating custom edit buttons for MediaWiki Is this still the way we should do this kind of things? This is possibly not a dublicate question because I am already asking about my particular issue here.

Answer 1

The problem was that the initiation code was missing. This code should directly add a smiley label to your advanced toolbar:

var customizeToolbar = function() {
    /* Your code goes here */


$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
    'section': 'advanced',
    'group': 'insert',
    'tools': {
        'SimpleComment': {
            label: 'Comment', 
            type: 'button',
            icon: '//upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png',
            action: {
                type: 'encapsulate',
                options: {
                    pre: "preText", 
                                        post: "postText"
                }
            }
        }
    }
} );








};

/* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar … */
if ( $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) !== -1 ) {
    mw.loader.using( 'user.options', function () {
        // This can be the string "0" if the user disabled the preference ([[phab:T54542#555387]])
        if ( mw.user.options.get( 'usebetatoolbar' ) == 1 ) {
            $.when(
                mw.loader.using( 'ext.wikiEditor.toolbar' ), $.ready
            ).then( customizeToolbar );
        }
    } );
}
// Add the customizations to LiquidThreads' edit toolbar, if available
mw.hook( 'ext.lqt.textareaCreated' ).add( customizeToolbar );

Can be added to wiki/User:YOUR_USRNAME/common.js

In LocalSettings.php this option must be enabled $wgAllowUserJs = true;