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.

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.

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: 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. /** * 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.

/** * 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)