Manual:Custom edit buttons

(Redirected from Customizing edit toolbar)
Jump to: navigation, search
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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

jQuery( document ).ready( function ( $ ) {
    $( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
        section: 'advanced',
        group: 'format',
        tools: {
            buttonId: {
                label: 'Comment visible only for editors',
                type: 'button',
                icon: '//',
                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 Krinkle) to simplify adding buttons to the wikiEditor.

Classic edit toolbar[edit | edit source]

if ( mw.toolbar ) {
    mw.toolbar.addButton( {
        imageFile: '//',
        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 his or her own text.

Example: using a script on Unix, Linux, Mac[edit | edit source]

To use a script for downloading images from English Wikipedia:

Create a file with the URLs:

$ cat >urls

Download images with wget

$ wget -N -i urls

See also[edit | edit source]

Language: English  • 日本語 • русский