Manual:Custom edit buttons

WikiEditor

Old toolbar

You have to differentiate between the old toolbar and the new one added by Extension:WikiEditor. To add new buttons you need to include them in your personal JavaScript (Important: In Localsettings.php add $wgAllowUserJs = true; ) or in the MediaWiki:Common.js or as a Gadget.

Extension:WikiEditor

jQuery(document).ready(function ($) {
        $('#wpTextbox1').wikiEditor('addToToolbar', {
                section: 'advanced',
                group: 'format',
                tools: {
                        buttonId: {
                                label: 'Comment visible only for editors',
                                type: 'button',
                                icon: '//upload.wikimedia.org/wikipedia/commons/f/f9/Toolbaricon_regular_S_stroke.png',
                                action: {
                                        type: 'encapsulate',
                                        options: {
                                                pre: "<!-- ",
                                                peri: "Insert comment here",
                                                post: " -->"
                                        }
                                }
                        }
                }
        });
});

See: Extension:WikiEditor/Toolbar customization for more on the wikiEditor

You may also use the insertVectorButtons script (by Krinkle) to simplify adding buttons to the wikiEditor.

mw.user.options.get( 'usebetatoolbar' ) can be used to check if a user is using the wikiEditor (true) or the old toolbar (false).

Old toolbar (deprecated)

mw.loader.using('mediawiki.action.edit', function () {
        var button = {
                id: 'button-comment',
                imageFile: '//upload.wikimedia.org/wikipedia/en/3/34/Button_hide_comment.png',
                speedTip: 'Comment visible only for editors',
                tagOpen: '<!-- ',
                tagClose: ' -->',
                sampleText: 'Insert comment here'
        };
        mw.toolbar.addButton(
                button.imageFile,
                button.speedTip,
                button.tagOpen,
                button.tagClose,
                button.sampleText,
                button.id,
                button.id
        );
});

How to get icons for the buttons

Example: using a script on Unix, Linux, Mac

To use a script for downloading images from English Wikipedia:

Create a file with the URLs:

$ cat >urls
 http://upload.wikimedia.org/wikipedia/en/c/c9/Button_strike.png
 http://upload.wikimedia.org/wikipedia/en/1/13/Button_enter.png
 http://upload.wikimedia.org/wikipedia/en/8/80/Button_upper_letter.png
 http://upload.wikimedia.org/wikipedia/en/7/70/Button_lower_letter.png
 http://upload.wikimedia.org/wikipedia/en/5/58/Button_small.png
 http://upload.wikimedia.org/wikipedia/en/3/34/Button_hide_comment.png
 http://upload.wikimedia.org/wikipedia/en/1/12/Button_gallery.png
 http://upload.wikimedia.org/wikipedia/en/6/60/Button_insert_table.png
 http://upload.wikimedia.org/wikipedia/en/f/fd/Button_blockquote.png
 http://upload.wikimedia.org/wikipedia/commons/7/79/Button_reflink.png

Download images with wget

$ wget -N -i urls

See also

• List of custom edit buttons at Wikimedia Commons
• Wikia's help page about custom edit buttons
• Reference toolbar, on-wiki JavaScript that adds a Cite toolbar to WikiEditor's UI.