Manual:Custom edit buttons

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

File:VectorEditorBasic-en.png

WikiEditor

File:Edit toolbar.gif

Classic edit toolbar

You can add custom edit buttons to the edit toolbar above the edit window using JavaScript (see below). You have to differentiate between the new toolbar added by Extension:WikiEditor and the old one (also known as classic edit toolbar).

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

Adding to JavaScript

Custom buttons utilize JavaScript to implement their functionality. To get the JavaScript to activate on the edit page, there are multiple ways to apply JavaScript to the wiki edit page:

Personal JavaScript — Appropriate on a server with this feature enabled and for buttons you want only available to users who copy the JavaScript into their personal JavaScript.
Extension JavaScript — Appropriate when all or many users of a wiki should be able to use the button. This assumes you are developing an extension to MediaWiki.
Core MediaWiki JavaScript — Appropriate when the new button should be allowed on all wiki installations.

Personal JavaScript

To add new buttons you can include them in your personal JavaScript.

In LocalSettings.php add $wgAllowUserJs = true; or in the MediaWiki:Common.js or as a Gadget.

Extension JavaScript

After the setup of the basic extension structure, the core PHP file will need to hold (or indirectly referenced, in complex extensions), the first two steps below. For a simple extension, like one intending only to add the custom button, the third step could occur in the core extension PHP file, as in this simple sample, or could be in another PHP file. There could also be localization needs, which would be included in the i18n file.

Define Resource Loader bundle

The best practice for extensions is exploitation of the Resource Loader API, which provides performance optimization as well as a standard way of accessing scripts. This simple example shows the addition of one JavaScript file.

$wgResourceModules['ext.MyExtension']['scripts'][] = 'extensions/MyExtension/js/MyExtension.js';

Reference Hook

One of the hooks offered by the Edit page allows addition of a function reference. The function or method referenced here can be in the main PHP file for the extension if it is a simple extension or in another PHP file.

$wgHooks['EditPage::showEditForm:initial'][] = 'addModule';

Define Hook

The edit page hook allows addition of a reference to the Resource Loader module defined earlier. This example shows adding to every page. There could be complex logic associated with when to display and further conditions would be added in this handler. The argument to the addModules method is the same string as defined in the step defining the bundle.

function addModule(EditPage $editPage, OutputPage $output ) {
$output->addModules( 'ext.MyExtension' );
}

With these three steps completed, the JavaScript file referenced in the resource bundle should be applied to every edit page. The API allows for multiple files and more fine grained control of when the file is called.

Core MediaWiki

The design criteria for additions to the core of MediaWiki exceed what are mentioned here, but the mechanics for adding buttons are described.

JavaScript files for core MediaWiki are referenced in the 'resources/Resources.php' file. The default bundle for the edit page includes 'resources/src/mediawiki.action/mediawiki.action.edit.js'. If the button should be displayed every time, this JavaScript file should be enhanced with the new button. If the button has conditions that the JavaScript file should not be loaded every time, steps similar to an extension should be executed and consideration should be give to whether the function belongs in the core of MediaWiki source code or whether an extension is the right tool to deliver the enhancement.

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 also Toolbar customization for more advanced options and examples.

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

Classic edit toolbar

mw.hook( 'wikipage.editform' ).add( function () {
    mw.loader.using( 'mediawiki.toolbar' ).then( 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'
        } );
    } );
} );

imageFile — is the full URL address to the edit button image.
tagOpen — is the opening tag, in this example: <!--
tagClose — is the closing tag, in this example: -->
sampleText — is the sample text that will appear between the opening and closing tags. The editor should replace this sample text with their own text.