Customizing edit toolbar

This page was recently moved from MetaWiki.
It probably requires cleanup – please feel free to help out. In addition, some links on the page may be red; respective pages might be found at Meta. Remove this template once cleanup is complete.

You can customize the Edit Toolbar quite easily.

[edit] Simple way modifying default toolbar settings

This method does not require JavaScript.

It is helpful to have a PHP text editor like Notepad++.

Below is a way to customize the edit toolbar. It is based on the way the default toolbar is created.

Example:
How to add the Insert Table icon on your toolbar:

1. Download an icon and save it to the skins/common/images folder as button_table.png.

2. Make backup copies of files: EditPage.php (in the includes directory) and MessagesEn.php (in the languages/messages directory)

3. Edit EditPage.php by adding an array at the end of the toolarray. Note the last array is the only one that does not have a comma at the end.

/**
* toolarray an array of arrays which each include the filename of
* the button image (without path), the opening tag, the closing tag,
* and optionally a sample text that is inserted between the two when no
* selection is highlighted.
* The tip text is shown when the user moves the mouse over the button.
*
* Already here are accesskeys (key), which are not used yet until someone
* can figure out a way to make them work in IE. However, we should make
* sure these keys are not defined on the edit page.
*/

(Several arrays between)

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

array(
'image' => $wgLang->getImageFile('button-table'),
'id' => 'mw-editbutton-table',
'open' => "{|",
'close' => "|}",
'sample' => 'class=wikitable border=1 cellpadding=5
|+ table name
|-
! header 1
! header 2
! header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
',
'tip' => wfMsg('table_tip'),
'key' => 'A'
)
);

$toolbar = "\n";
$toolbar.="<script type='$wgJsMimeType'>\n/*<![CDATA[*/\n";

4. Edit MessagesEn.php. Add the lines shown below.

/**
* List of filenames for some ui images that can be overridden per language
* basis if needed.
*/
$imageFiles = array(
'button-bold' => 'button_bold.png',
'button-italic' => 'button_italic.png',
'button-link' => 'button_link.png',
'button-extlink' => 'button_extlink.png',
'button-headline' => 'button_headline.png',
'button-image' => 'button_image.png',
'button-media' => 'button_media.png',
'button-math' => 'button_math.png',
'button-nowiki' => 'button_nowiki.png',
'button-sig' => 'button_sig.png',
'button-hr' => 'button_hr.png',
'button-table' => 'button_table.png',
);


(many lines below)

Edit page toolbar
'bold_sample' => 'Bold text',
'bold_tip' => 'Bold text',
'italic_sample' => 'Italic text',
'italic_tip' => 'Italic text',
'link_sample' => 'Link title',
'link_tip' => 'Internal link',
'extlink_sample' => http://www.example.com link title,
'extlink_tip' => 'External link (remember http:// prefix)',
'headline_sample' => 'Headline text',
'headline_tip' => 'Level 2 headline',
'math_sample' => 'Insert formula here',
'math_tip' => 'Mathematical formula (LaTeX)',
'nowiki_sample' => 'Insert non-formatted text here',
'nowiki_tip' => 'Ignore wiki formatting',
'image_sample' => 'Example.jpg', # only translate this message to other languages if you have to change it
'image_tip' => 'Embedded file',
'media_sample' => 'Example.ogg', # only translate this message to other languages if you have to change it
'media_tip' => 'File link',
'sig_tip' => 'Your signature with timestamp',
'hr_tip' => 'Horizontal line (use sparingly)',
'table_tip' => 'Insert table (3 by 3)',

5. Go to a page on your Wiki and click Edit. Select a new line. Test the Insert Table icon and check the results.

[edit] Old way - editing php file on server

In the ...wiki/includes/ directory you will find a file called Skin.php for versions minor to Mediawiki 1.5 (for Mediawiki 1.5+ in EditPage.php see note below). Don't forget to make a copy before changing it, just in case (cp Skin.php SkinOriginal.php).

Note: In Mediawiki 1.5 and later, this can be found in ...wiki/includes/EditPage.php at line 1452 (line 1437 for 1.6.12) (line 1603 for 1.7.1) (line 1610 for 1.10.1) (line 1649 for 1.11).

Search for function getEditToolbar() or $toolarray.

Add the new button code after line 2780, as the example above

array(	'image'=>'button_bold.png',
	'open'	=>	"\'\'\'",
	'close'	=>	"\'\'\'",
	'sample'=>	wfMsg('bold_sample'),
	'tip'	=>	wfMsg('bold_tip'),
	'key'	=>	'B'
),

It is easy to work out from the names of the button image files which array is related to which function and you can delete buttons from the Edit Toolbar by simply removing the appropriate array lines.

You can change the image used by the buttons by changing the button_NNNN.png files - stored in the .../wiki/stylesheet/images/ directory. - This directory appears to not be present in 1.5.3(and 1.7.1) use .../skins/common/images instead.

You can add buttons to the array by simply adding a new array definition - one reason to do this is to help users structure pages by adding a pre-defined set of headers, rules or advice.

[edit] Example

For example to add a button that makes the selected text yellow and reduces its size:

1. make a button for your edit function (the standard size is 23 x 22 pixels)
2. save it in the .../stylesheet/images file - (I could not find this directory in 1.5.3 & 1.11.1 - looks like it should be in .../skins/common/images )
3. open ...wiki/includes/
4. Mediawiki 1.4 and older: rename Skin.php to Skin.php~
5. Mediawiki 1.5 and newer: rename EditPage.php to EditPage.php~
6. open it up and find the function "function getEditToolbar()", add the new button to the array "$toolarray" by inserting(Note the comma in the end):

array(	'image'=>'button_small_yellow.png',
	'open'	=>	"<font size=\"-1\" color=\"#FFFF00\">",
	'close'	=>	"</font>",
	'sample'=>	wfMsg('smallyellow_sample'),
	'tip'	=>	wfMsg('smallyellow_tip'),
	'key'	=>	'R'
),

7. Mediawiki 1.4 and older: save as Skin.php

8. Mediawiki 1.5 and newer: save as EditPage.php

9. open a browser and make a new page in your wiki and check that the new button is working.

10. make special pages to define the sample and tooltip text, in the above sample: [[MediaWiki:smallyellow_sample]] and [[MediaWiki:smallyellow_tip]]

[edit] Tips

• Add your own text inside the array using the Wiki Mark Up: ==Headline1==\\n\\n==Headline2== (\\n is a line break, and \\n\\n adds a blank line)
• Remember not to use apostrophes
• Remember to use \" with HTML text requiring a quotation mark.
• Use <!-- HTML Comments tags --> if you don't want text to show up on the final wiki page.
• You need to add a special page so you can edit the wfMsg text - otherwise the tip text file name appears inside angled brackets when your pointer rolls over the button. Examples: MediaWiki:Nowiki sample and MediaWiki:Nowiki tip
• You can place the new button anywhere on the edit toolbar -- just insert the array() line in between the sections for the buttons where you want to insert your new one.

[edit] New way - editing MediaWiki:Common.js

You can modify edit buttons with site JavaScript code, by modifying mwEditButtons[] and mwCustomEditButtons[] arrays. For examples see, and Manual:FAQ#How_do_I_add_more_buttons_on_the_edit_page.3F.