Manual:Custom edit buttons

You can add custom edit buttons to the edit window easily with JavaScript.

JavaScript code needed
To add custom edit buttons, edit either User:Your username/skinname.js or MediaWiki:Common.js on your wiki. If you edit the former, the buttons will only show up for yourself and if the latter, they will show to all wiki users.

imageFile is the full URL to the edit button image. Please do not hotlink images from Wikimedia Commons or Wikipedia! Upload them to your web host instead. . See next section if you want to use a script for downloading images from english wikipedia tagOpen is simply the opening tag, e.g..

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.

Script for downloading icon images from english wikipedia
Create a file with the URLs:

$ sudo 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

A Simple Way Without JavaScript
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: /** * 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.="\n/*<![CDATA[*/\n";  4. Edit MessagesEn.php. Add the lines shown below.
 * 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 and MessagesEn.php
 * 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.

/** * 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. --TheBoroBob 19:16, 4 November 2008 (UTC)

General php code to get same buttons as wikipedia
If you just want to make your mediawiki's buttons extend to all the 21 on wikipedia, here is a fast way to do it:

add the below text to includes/EditPage.php in the $toolarrow array, at about line 1900ish in the most recent version. (credit for this goes to a half dozen people here)

You need to add a comma after the current last item's right parenthesis, Make sure that only the LAST item of $toolarray does not have a comma after it's parentheses or a funky error message will stop your wiki ice cold!

Also, note that you need to save the toolbar button image files from the wikipedia toolbar into your skins/common/images directory, as these images aren't normally installed there like the others. Just open up an edit page in wikipedia and right-click 'save image as', starting with redirect and going to the end.

and like, you can edit the rollover text by the process the guy above mentions. thanks.

array(	'image'	=> "Button_redirect.png",				'id'   => "Button_redirect",				'tip'	=> "Redirect",				'open'	=> "#REDIRECT ",				'close'	=> "",				'sample'=> "Insert text"			), array(	'image'	=> "Button_strike.png",				'id'   => "Button_strike",				'tip'	=> "Strike",				'open'	=> " ",				'close'	=> " ",				'sample'=> "Strike-through text"			), array(	'image'	=> "Button_enter.png",				'id'   => "Button_enter",				'tip'	=> "Line break",				'open'	=> " ",				'close'	=> "",				'sample'=> ""			), array(	'image'	=> "Button_upper_letter.png",				'id'   => "Button_upper_letter",				'tip'	=> "Superscript",				'open'	=> " ",				'close'	=> " ",				'sample'=> "Superscript text"			), array(	'image'	=> "Button_lower_letter.png",				'id'   => "Button_lower_letter",				'tip'	=> "Subscript",				'open'	=> " ",				'close'	=> " ",				'sample'=> "Subscript text"			), array(	'image'	=> "Button_small.png",				'id'   => "Button_small",				'tip'	=> "Small",				'open'	=> " ",				'close'	=> " ",				'sample'=> "Small Text"			), array(	'image'	=> "Button_hide_comment.png",				'id'   => "Button_hide_comment",				'tip'	=> "Insert hidden Comment",				'open'	=> "",				'sample'=> "Comment"			), array(	'image'	=> "Button_blockquote.png",				'id'   => "Button_blockquote",				'tip'	=> "Insert block of quoted text",				'open'	=> " \\n",				'close'	=> "\\n ",				'sample'=> "Block quote"			), array(	'image'	=> "Button_insert_table.png",				'id'   => "Button_insert_table",				'tip'	=> "Insert a table",				'open'	=> '{| class="wikitable"\\n|-\\n',				'close'	=> "\\n|}",				'sample'=> "! header 1\n! header 2\n! header 3\n|-\n| row 1, cell 1\n| row 1, cell 2\n| row 1, cell 3\n|-\n| row 2, cell 1\n| row 2, cell 2\n| row 2, cell 3"			), array(	'image'	=> "Button_reflink.png",				'id'   => "Button_reflink",				'tip'	=> "Insert a reference",				'open'	=> " ",				'sample'=> "Insert footnote text here"			)