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 InsertWikiEditorButton 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).

Classic edit toolbar

var addExtraButtons = function(){
    mw.toolbar.addButton( {
        imageFile: '//upload.wikimedia.org/wikipedia/en/3/34/Button_hide_comment.png',
        speedTip: 'Comment visible only for editors',
        tagOpen: '<!-- ',
        tagClose: ' -->',
        sampleText: 'Insert comment here',
        imageId: 'button-comment'
    } );
};
 
if( $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) !== -1 ) {
    mw.loader.using( 'user.options', function () {
        if ( ! mw.user.options.get( 'usebetatoolbar' ) ) {
            mw.loader.using( 'mediawiki.action.edit', function(){
                $( addExtraButtons );
            } );
        }
    } );
}

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

• Commons toolbar formatting buttons
• List of custom edit buttons at Wikimedia Commons
• Reftoolbar 2.0, on-wiki JavaScript that adds a Cite toolbar to WikiEditor's UI.

Language:	English  • 日本語