Tuesday 20 October 2009

MediaWiki - Toolbar

Recently, we downloaded and installed MediaWiki. To our surprise, our of the box, the toolbar available when installing is lacking quite a few buttons that are standard available on wikipedia itself.

The MediaWiki helpfiles are less than helpful, though they do contain a description on how to add a single (table) button. For those wanting to replicate the look of the actual wiki, here's the code for the remaining buttons. You'll need to make modifications to two files (make backups first):


/w/EditPage.php

Find the following snippet:

),
array(
'image' => $wgLang->getImageFile('button-hr'),
'id' => 'mw-editbutton-hr',
'open' => "\n----\n",
'close' => '',
'sample' => '',
'tip' => wfMsg('hr_tip'),
'key' => 'R'
)


Below/after that, add the following:


,
array(
'image' => $wgLang->getImageFile('button-redirect'),
'id' => 'mw-editbutton-redirect',
'open' => '#REDIRECT [[',
'close' => ']]',
'sample' => wfMsg('redirect_sample'),
'tip' => wfMsg('redirect_tip'),
'key' => 'V'
),
array(
'image' => $wgLang->getImageFile('button-strike'),
'id' => 'mw-editbutton-strike',
'open' => "",
'close' => "
",
'sample' => wfMsg('strike_sample'),
'tip' => wfMsg('strike_tip'),
'key' => 'S'
),
array(
'image' => $wgLang->getImageFile('button-linebreak'),
'id' => 'mw-editbutton-linebreak',
'open' => "
",
'close' => "",
'sample' => '',
'tip' => wfMsg('linebreak_tip'),
'key' => 'BR'
),
array(
'image' => $wgLang->getImageFile('button-superscript'),
'id' => 'mw-editbutton-superscript',
'open' => "",
'close' => "
",
'sample' => wfMsg('superscript_sample'),
'tip' => wfMsg('superscript_tip'),
'key' => 'I1'
),
array(
'image' => $wgLang->getImageFile('button-subscript'),
'id' => 'mw-editbutton-subscript',
'open' => "",
'close' => "
",
'sample' => wfMsg('subscript_sample'),
'tip' => wfMsg('subscript_tip'),
'key' => 'I2'
),
array(
'image' => $wgLang->getImageFile('button-smalltext'),
'id' => 'mw-editbutton-smalltext',
'open' => "",
'close' => "
",
'sample' => wfMsg('smalltext_sample'),
'tip' => wfMsg('smalltext_tip'),
'key' => 'J1'
),
array(
'image' => $wgLang->getImageFile('button-hidden'),
'id' => 'mw-editbutton-hidden',
'open' => "",
'sample' => wfMsg('hidden_sample'),
'tip' => wfMsg('hidden_tip'),
'key' => 'HC'
),
array(
'image' => $wgLang->getImageFile('button-gallery'),
'id' => 'mw-editbutton-gallery',
'open' => "",
'close' => "
",
'sample' => wfMsg('gallery_sample'),
'tip' => wfMsg('gallery_tip'),
'key' => 'HC'
),
array(
'image' => $wgLang->getImageFile('button-blockquote'),
'id' => 'mw-editbutton-blockquote',
'open' => "
",
'close' => "
",
'sample' => wfMsg('blockquote_sample'),
'tip' => wfMsg('blockquote_tip'),
'key' => 'B1'
),
array(
'image' => $wgLang->getImageFile('button-table'),
'id' => 'mw-editbutton-table',
'open' => "{|",
'close' => "|}",
'sample' => 'class="wikitable sortable border=1 cellpadding=5"
|+ table name
|-
! style="color:#AAB5BE;background-color:#24313F;" | header 1
! style="color:#AAB5BE;background-color:#24313F;" | header 2
! style="color:#AAB5BE;background-color:#24313F;" | header 3
|-
| style="color:#24313F;" | row 1, cell 1
| style="color:#24313F;" | row 1, cell 2
| style="color:#24313F;" | row 1, cell 3
|-
| style="color:#24313F;" | row 2, cell 1
| style="color:#24313F;" | row 2, cell 2
| style="color:#24313F;" | row 2, cell 3
',
'tip' => wfMsg('table_tip'),
'key' => 'A'
),
array(
'image' => $wgLang->getImageFile('button-reference'),
'id' => 'mw-editbutton-reference',
'open' => "",
'close' => "
",
'sample' => wfMsg('reference_sample'),
'tip' => wfMsg('reference_tip'),
'key' => 'R1'
)


For icons, refer to the link above, and find the link at the first option.

Secondly, you need to edit /w/languages/messages/MessagesEn.php. This file will allow us to add both the path to the actual icons (which ought to be placed in /skins/common/images, by the way), and assign a tooltip text (which shows when you hover your mouse over a button) and a sample (which will be put as an example when you click the button. For instance, when you will click the strike-out button, this will show up: Struck out text, and Struck out text is the sample).

Find:

'button-hr' => 'button_hr.png',


Below it, add:

'button-table' => 'button_table.png',
'button-redirect' => 'button_redirect.png',
'button-strike' => 'button_strike.png',
'button-superscript' => 'button_sup_letter.png',
'button-subscript' => 'button_sub_letter.png',
'button-linebreak' => 'button_linebreak.png',
'button-smalltext' => 'button_small_text.png',
'button-hidden' => 'button_hide_comment.png',
'button-gallery' => 'button_gallery.png',
'button-blockquote' => 'button_blockquote.png',
'button-reference' => 'button_reflink.png',


Then find:

'hr_tip' => 'Horizontal line (use sparingly)',


And replace it with:

'table_tip' => 'Insert table (3 by 3)',
'redirect_tip' => 'Redirect',
'redirect_sample' => 'Target page name',
'strike_tip' => 'Strike',
'strike_sample' => 'Strike-through text',
'subscript_tip' => 'Subscript text',
'subscript_sample' => 'Subscript text',
'superscript_tip' => 'Superscript text',
'superscript_sample' => 'Superscript text',
'smalltext_tip' => 'Small text',
'smalltext_sample' => 'Small text',
'hidden_tip' => 'Insert hidden comment',
'hidden_sample' => 'Comment',
'gallery_sample' => 'Image:Example.jpg|Caption1
Image:Example.jpg|Caption2',
'gallery_tip' => 'Insert a picture gallery',
'blockquote_tip' => 'Insert block of quoted text',
'blockquote_sample' => 'Block quote',
'reference_tip' => 'Insert a reference',
'reference_sample' => 'Insert footnote text here',


That's all there really is to it. Your toolbar now reflects the standard one at wiki.

1 comment:

KembleSteve said...

Peter
I have been trying to set up a mediawiki site for a relative for the last two weeks now and what a struggle it has been. I spend my life programming computers, but mediawiki seems so un-intuitive when it comes to setting it up.
You really hit the nail on the head with this article of yours. I could not believe that many of the vital icons for editing a page were missing, though presumably the core wiki software is aware of the missing functions.
I loaded up your code and eventually found the icons, but even this was a pain to identify then upload onto the server, one at a time.
As it did not work, I removed everything apart from the table, but unfortunately even this leaves me with script on the page, rather than a table, but I am sure it's just down to some syntax problems of mine.
My main question is how you managed to find the code for each of the functions (for example the table), as there is no way I could work out what it should be? Is it hidden somewhere on the mediawiki site?
So finally, thanks for all the hard work you have put into this - if only the default installation had them in there in the first place, as it is always easier to remove items than find out what they should be.
Steve.