User:MarkS/Extra edit buttons#Supported Browsers

I normally test Extra Edit buttons:

• Firefox (Windows XP esx5)
• Internet Explorer 7 (Windows XP SP2)
• Internet Explorer 6 (Windows XP SP2)
• Opera (Windows XP SP2).
• Safari (Windows) v3.0.1 onwards

The code will normally be tweaked to ensured that it works fully on these browsers.

I may sometimes test on:

• SeaMonkey (Windows XP SP2)
• Firefox on Linux (Ubuntu).
• Konqueror (Ubunutu)
• Earlier version of IE

A list of users of XEB is kept at List of users. The list will be used to help contact interested parties in the event of new features/radical changes/problems. XEB will work whether or not you are on the list of users.

For extra edit page buttons, put the following code in your monobook.js, replacing "monobook" with the name of your skin, in all lowercase (using "standard" for Classic skin).

{{subst:js|User:MarkS/extraeditbuttons.js}}

Once this has been done, refresh Wikipedia in your browser (select Refresh or Reload) and the new buttons will be available on your toolbar. You do not need to do anything further. If after using the extra edit buttons for some time you wish to alter the buttons available or the order of the buttons then please read the more detailed instructions below.

To fully customise extra edit buttons then add the following code to your monobook.js, replacing "monobook" with the name of your skin, in all lowercase (using "standard" for Classic skin).

XEBOrder='A,B,C,D';

rmEditButtons=[1,2,3];

myButtons=[];

{{subst:js|User:MarkS/extraeditbuttons.js}}

Note:

• XEBOrder specifies which buttons to display and the order in which to display them
• rmEditButtons lists the standard buttons to remove (use rmEditButtons=['all'] to remove them all)
• myButtons lists extra buttons which you wish to use with extra edit buttons.

If you don't add one or more of these variables to your monobook.js then extra edit buttons will still work.

Extra edit buttons includes the buttons listed below. Those marked as standard are added to your toolbar if you install XEB. The remaining buttons can be included by using the XEBOrder option (see below).

You can also specify completely new buttons to be included using the myButtons option (see below).

|-

| Image:Btn_toolbar_gallery.png || Insert a gallery || * ||G || ||

Image:M63.jpg|M63

Image:Mona Lisa.jpg|Mona Lisa

Image:Truite arc-en-ciel.jpg|A trout

|-

| Image:Button_definition_list.png || Definition list || * ||Q || ||

; Definition

: Item 1

: Item 2

|-

| Image:Btn_toolbar_enum.png || Numbered list || * ||W || ||

# Element 1

# Element 2

# Element 3

|-

| Image:Btn_toolbar_liste.png || Bulleted list || * ||X || ||

* Element 1

* Element 2

* Element 3

|-

| Image:Button_category03.png || Category || * ||K || || Category:Category name

|-

| Image:Button_shifting.png || Tabs || * ||L || || :

|-

| Image:Button blockquote.png || Block quote text || * ||M || ||

Block quote

|-

| Image:Button_comment.png || Comment || * ||H || ||

|-

| Image:Button code1.png || Insert code || * ||O || || Code

|-

| Image:Button_reflink.png || Reference (see below) || * ||R ||Yes || Insert reference material

|-

| Image:Button_plantilla.png || Add a template || * ||T || || {{Template name}}

|-

| Image:Button_redirect.png || Redirect || ||V || || #REDIRECT Article Name

|-

| Image:Button_miss_signature.png || Unsigned post || || FS || || {{subst:unsigned|user name or IP|date}}

|-

| Image:Button_big.png || Big text|| ||J2 || || Big text

|-

| Image:Button_nbsp.png || Non breaking space || ||N || ||  

|-

| Image:Button_pre.png || Pre formatted text || ||P || ||

Pre formatted text

|-

| Image:Button_sub_link.png || Link to a sub page || ||P1 || || Page/Sub_Page

|-

| Image:Button_reflink.png || Start a reference (see below)|| ||R1 || || |

|-

| Image:Button template alt.png || Reference footer || || R4|| ||

==Notes==

|-

| Image:Tt_icon.png || Teletype text || ||T1 || || Teletype Text

|-

| Image:Button_tl_template.png || Substitute template || ||TL || || {{subst:tl|Template name}}

|-

| Image:TableStart.png || Start a table || ||TS || ||

|-

| Image:Button_no_include.png || No include || ||Y1 || || Text

|-

| Image:Button_include.png || Include only || ||Y2 || || Text

|-

| Image:Button_substitute.png || Substitute || ||Z || || {{subst:Template}}

|-

| Image:Button_advanced_image.png || Advanced image || ||AI || || Image:M63.jpg

|-

| Image:Button Globe.png || Geo link || || GEO || Yes || Displays a popup to enter latitude and longitude, type of place (landmark, city ...). The popup then inserts the relevant coor template

|}

By default only buttons with a "*" in the standard column are displayed. This is keeps the total number of buttons down and avoids showing the more complex buttons in the default arrangement. To show the extra (non-default) buttons or alter the order of the buttons are showed see the section below 'Changing the layout').

The reference buttons come in two parts:

1. Button 'R' (included by default) includes the basic reference tags
2. Button 'R1','R2' and 'R3' allow you to build up a reference in parts. R1 starts a reference. R2 lets you add the reference material and 'R3' finishes the reference. You are likely to want all these buttons or none of them

XEB displays the standard buttons in the order listed above automatically.

You can change the order of the buttons and which buttons are displayed by creating a Javascript variable XEBOrder. Set this variable equal to a string containing each button's code separated by commas. The order of the buttons in XEBOrder is the order they are displayed on the toolbar. For example:

XEBOrder = "A,B,C,E,G,I1,I2,R1,R2,R4,T1,Y1,Y2,Z,AI,N";

mw.loader.load( 'http://en.wikipedia.org/w/index.php?title=User:MarkS/Extra edit buttons/dev.js'

+ '&action=raw&ctype=text/javascript' );

rmEditButtons is an array which lists the index numbers of the standard english wikipedia buttons you wish to remove. For example:

rmEditButtons=[0,2]

will remove buttons 0 and 2 from your toolbar.

rmEditButtons=['Administrators']

will remove all the standard buttons from your toolbar. You may wish to use this option if you want to fully customise the toolbar and specify where the standard buttons appear in the toolbar.

rmEditButtons can only remove buttons that Wikipedia itself places on your toolbar. These buttons have numbered IDs. IF you wish to remove buttons from the default extra buttons supplied by XEB then you must use the XEBOrder variable and specify all the buttons you want XEB to add to your toolbar.

The Wikimedia software used to power Wikipedia provides 10 standard buttons. The English version of Wikipedia then provides a further 11 standard buttons. These 21 buttons are the default toolbar shown to users. XEB provides access to these buttons using numeric codes starting from 0 (so Bold is 0, Italic is 1). You can use these codes in two ways: (i) You can include them in XEBOrder to make a standard button appear somewhere else in the toolbar, (ii) You can use then in rmEditButtons to stop wikipedia displaying them. In this way you can customise the whole toolbar.

XEB can also work with extra buttons created by the user. To do this you must define the myButtons variable in your monobook.js. The format of myButtons is:

myButtons={'_CODE1':['url1','Tooltip1','Before1','After1','Text1'],

'_CODE2':['url2','Tooltip2','Before2','After2','Text2']};

where:

• Code is a code for the button. You should place this code in XEBOrder to make your button appear on the toolbar. You can use any text you like. However, it is recommended that you start the code with an underscore to make sure it doesn't clash with any future standard XEB buttons. This must be in upper case letters.
• URL is the full URL to the button image. You must enter the URL of the image on its own, rather than the Wikimedia page that describes the button, so use: [http://upload.wikimedia.org/wikipedia/commons/f/f0/Bouton_Vandale0.png http://upload.wikimedia.org/wikipedia/commons/f/f0/Bouton_Vandale0.png] rather than [http://commons.wikimedia.org/wiki/Image:Bouton_Vandale0.png http://commons.wikimedia.org/wiki/Image:Bouton_Vandale0.png]
• ToolTip is the popup tooltip that will appear when the mouse moves over the button.
• Before is the text to insert before the current cursor location.
• After is the text to place after the current cursor location.
• Text is the text that is placed between before and after. If the user has selected text in the edit box when the button is pressed this selected text will be placed between before and after instead.

This example defines two extra buttons:

myButtons={'_ZZ':['http://upload.wikimedia.org/wikipedia/commons/e/e9/Button_headline2.png','Mark Test','Before','After','Middle'],

'_ZA':['http://upload.wikimedia.org/wikipedia/commons/1/13/Button_enter.png','Mark2 Test','111','333','222']};

For more examples and usable buttons, see the !voting/discussion buttons made by Willscrlt.

This is the list of buttons we know of so far (the list below includes the standard buttons). Buttons used by the 'extra buttons' have captions. Please upload any new buttons you find to the :commons:Category:MediaWiki edit toolbar and add them to the gallery below (in alphabetical image order, so we can find duplicates and easily know what is there). Buttons not in Commons cat are tagged as MOVE TO COMMONS (please upload them to Commons and remove the tag from the gallery). The list as of now may contain duplicates, images not upload to commons and images at commons not at category — please help fix it!

Image:Bold icon.png

Image:Bouton Vandale0.png

Image:Bouton Vandale1.png

Image:Bouton Vandale2.png

Image:Bouton Vandale3.png

Image:Bouton Vandale4.png

Image:Button acute accent.png

Image:Button advanced image.png| Advanced image

Image:Button align left.png|Align left MOVE TO COMMONS

Image:Button align right.png|Align right

Image:Button anular voto.png

Image:Button archivar biblio.png

Image:Button archivo borrar.png

Image:Button array.png|Insert table

Image:Button av-img.png

Image:Button aviso borrado.png

Image:Button aviso.png

Image:Button base.png

Image:Button bienvenido.png

Image:Button big.png| Big txt

Image:Button biocitas.png

Image:Button blocage.png

Image:Button broom.png

Image:Button BY.png

Image:Button blockquote.png|Block quote text MOVE TO COMMONS

Image:Button case.png

Image:Button category.png

Image:Button category02.png

Image:Button category03.png|Category

Image:Button category alt.png

Image:Button category link.png

Image:Button center.png|Centred text MOVE TO COMMONS

Image:Button chapitre.png

Image:Button check.png

Image:Button class text.png

Image:Button code1.png| Insert code MOVE TO COMMONS

Image:Button comillas latinas.png

Image:Button comment.png| Comment

Image:Button comment2.png

Image:Button commentlow.png

Image:Button commentuser.png

Image:Button commons.png

Image:Button conserver.png

Image:Button context.png

Image:Button contexto.png

Image:Button copy edit.png

Image:Button copy vio plagio.png

Image:Button copy vio.png

Image:Button copyvio.png

Image:Button crocs.png

Image:Button croix bleue.png

Image:Button dagger.png

Image:Button definition list.png|Definition list MOVE TO COMMONS

Image:Button delete.png

Image:Button delete.png

Image:Button desambig.png

Image:Button dicc.png

Image:Button encrypted.png

Image:Button enter.png|Line break MOVE TO COMMONS

Image:Button ER.png

Image:Button examine.png

Image:Button exclamation.png

Image:Button exclamation 1.png

Image:Button exclamation 2.png

Image:Button fairuse.png

Image:Button find.png

Image:Button flamme.png

Image:Button font color.png|Coloured text MOVE TO COMMONS

Image:Button fuente primaria.png

Image:Button fusion.png

Image:Button gallery.png|MOVE TO COMMONS

Image:Button gfdl.png

Image:Button gif.png

Image:Button gnu.png

Image:Button grec.png

Image:Button guillemet.png

Image:Button insert table.png|MOVE TO COMMONS

Image:Button halt.png

Image:Button headline2.png|Secondary headline MOVE TO COMMONS

Image:Button hide comment.png|MOVE TO COMMONS

Image:Button image.png

Image:Button include.png|Include only

Image:Button indevelopment.png

Image:Button info.png

Image:Button interprojet.png

Image:Button invalid template.png

Image:Button IP.png

Image:Button ip partagée.png

Image:Button justice.png

Image:Button keep.png

Image:Button latinas.png

Image:Button link to Wikipedia.png

Image:Button linkautor.png

Image:Button lower letter.png|MOVE TO COMMONS

Image:Button merge articles.png

Image:Button mini stub.png

Image:Button miss signature.png|Unsigned post

Image:Button mort.png

Image:Button mysignature.png

Image:Button nbsp.png|Non breaking space

Image:Button neutre.png

Image:Button no include.png|No include

Image:Button no license.png

Image:Button no neutral.png

Image:Button no source no license.png

Image:Button no source.png

Image:Button nogifs.png

Image:Button oeil.png

Image:Button oppose vote.png

Image:Button oppose.png

Image:Button out relevancy.png

Image:Button pd.png

Image:Button petit.png

Image:Button plantilla.png|Add a template

Image:Button plume.png

Image:Button_plume.pngButton plume 1.png

Image:Button poeme.png

Image:Button polytonique.png

Image:Button pre.png|Pre formatted text

Image:Button preview.png

Image:Button publication.png

Image:Button question.png

Image:Button radio activite.png

Image:Button recherche ip.png

Image:Button redir.png

Image:Button redirect.png|Redirect MOVE TO COMMONS

Image:Button rediriger.png

Image:Button references alt.png

Image:Button references2 new.png

Image:Button reflink.png|Reference

Image:Button reflink advanced 2.png|Add reference material

Image:Button reflink advanced 3.png|End a reference

Image:Button removed.png

Image:Button replace.png

Image:Button request deletion.png

Image:Button rfacomment.png

Image:Button romain.png

Image:Button save changes.png

Image:Button shifting.png|MOVE TO COMMONS

Image:Button small.png|Small text MOVE TO COMMONS

Image:Button small 2.png

Image:Button strike.png|Strike through text MOVE TO COMMONS

Image:Button smiley.png

Image:Button smiley2.png

Image:Button source jv.png

Image:Button stop.png

Image:Button strike.png

Image:Button stub.png

Image:Button sub letter.png|Subscript

Image:Button sub link.png|Link to a sub page MOVE TO COMMONS

Image:Button substitute.png|Substitute

Image:Button sup letter.png|Superscript

Image:Button supp.png

Image:Button support vote.png

Image:Button support.png

Image:Button tachar.png

Image:Button template alt.png|Reference footer

Image:Button templatelink.png

Image:Button template tl.png

Image:Button titre.png

Image:Button tl template.png|Substitute template

Image:Button Tool commons.png

Image:Button tournesol.png

Image:Button transwiki.png

Image:Button travaux.png

Image:Button uncorrect.png

Image:Button underline.png|Underline

Image:Button upper letter.png|MOVE TO COMMONS

Image:Button user.png

Image:Button user talk.png

Image:Button user.png

Image:Button vote biblio.png

Image:Button vote deletion.png

Image:Button welcome ip.png

Image:Button welcome.png

Image:Button wikibooks.png

Image:Button wikification.png

Image:Button wikimedia.png

Image:Button wikipedia.png

Image:Button wikiquote.png

Image:Button wikisource.png

Image:Button wikiversity.png

Image:Button wikt new.png

Image:Button wiktionary.png

Image:Button wiktionnaire.png

Image:Button wn.png

Image:Button1.PNG

Image:Btn plus.png

Image:Btn toolbar commentaire.png

Image:Btn toolbar enum.png|Numbered list

Image:Btn toolbar gallery.png|Insert a gallery

Image:Btn toolbar liste.png|Bulleted list

Image:Btn toolbar rayer.png

Image:Bv icon.png

Image:Bvip icon.png

Image:Category icon.png

Image:Cs icon.png

Image:External link icon.png

Image:H-line icon.png

Image:Headline icon.png

Image:Icono recientes.png

Image:Icono seguimiento.png

Image:Image icon.png

Image:Button_link.png

Image:Italic icon.png

Image:Math icon.png

Image:Media icon.png

Image:Nowiki icon.png

Image:Pulsante tl.png

Image:Sharp button.png

Image:Signature icon.png

Image:Sister icon.png

Image:Tt icon.png|Teletype text

Image:TableCell.png|Table cell

Image:TableEnd.png|End a table

Image:TableRow.png|Table row

Image:TableStart.png|Start a table

Image:Tacita.png

Image:Template button.png

Image:Tt icon.png

Image:WP-icon.png

Image:Button RSS.png

From the 6 March 2007 XEB includes popups on a number of buttons. Popups are dialog boxes that float over the web page when you click on the button. The dialog boxes are to make it easier to customise in more detail the markup code that gets entered.

The popups currently available are:

If you want something extra added or changed then you can:

• Amend the code. Please note: If you amend the main code (User:MarkS/extraeditbuttons.js) then everybody who uses XEB will pick up the change at the same. For this reason you should test changes in a development version (see below) before amending the live code.
• Leave a request on the talk page, ideally with the code you want added.

• April 24 2006 changed toolbar buttons-now on two lines.

::Wikipedia has revised how it builds toolbar buttons. Wikipedia now seems to build its toolbar buttons through on onload event after the page has loaded. Extra edit buttons overrode this which stopped the buttons working. However, as the buttons are now loading after the page has loaded the extra edit buttons now have to be added first. The choice was either add the buttons before wikipedia's or add them on a separate line. I have gone for a separate line.

• April 25 2006 fundamental changes

:: I have removed all the original code which insert HTML into the toolbar and replaced it by filling in the javascript array wmCustomEditButtons. This seems to be the official way to do it and the resulting code is a lot neater.

• June 26 2006 Added 4 extra buttons: template, category, reflink and references
• October 13 2006 Complete rewrite of the code added. Ability to change the order of the buttons and which buttons are shown.
• November 19 2006 Added tl button and updated two images.
• December 13 2006 All toolbar buttons (XEB and standard buttons) are now fully customizable. Changes to the timing of when the buttons are setup. Users can now defined their own buttons. Ability to remove some or all of the standard buttons. Order of standard Wikipedia buttons can changed.
• 6 March 2007 Major upgrade. XEB now features popups on some of the buttons. These display a dialog box to complete with parameters. The markup code then depends on the inserted text.
• 8 March 2007. Quick update to fix a bug. It looks as if the order of items in the array which stores the mediaWiki standard buttons has changed. When these were copied to XEB then the URL of the image ended up as the popup text. This quick update copies the info a different way. The bug only affect people who reused the standard MediaWiki buttons elsewhere in the toolbar.
• 28 April 2007. Update to the way text from popups is inserted into the page. This mainly affects IE which had problems putting the text in right place after Wikipedia's edit box had lost focus. Version: 3.1

My test version can be found under User:MarkS/Extra edit buttons/dev.js. This version may or may not be different to the live version. You can use this version by updating your monobook.js to use the test version rather than the live version.

If trying out your own changes then you can use the test version or you may find it easier to take a copy of the live code and create a test version under your userpages. Change the reference in your monobook.js to this test version. Then try out your changes. Once your changes have been made and tested then either update the live code or ask me. Note: When I update the live version I usually test in IE7, Opera and Firefox (Windows versions).

Installing XEB on setups other than Wikipedia is not something that is supported. However, the steps may help:

1. You will need your own setup of the MediaWiki software. This is not something I can help you with. However, I have used meta:Wiki on a stick and found it easy to setup. I have also installed XEB on it.
2. You must enable users to run Javascript by setting $wgAllowUserJS to true in LocalSettings.php (see: [http://www.mediawiki.org/wiki/Manual:%24wgAllowUserJs])
3. For the simplest install create a user called MarkS (or see below at 6).
4. Copy the XEB script from User:MarkS/extraeditbuttons.js to the same location on your wiki
5. Copy the XEB css from User:MarkS/XEB/live.css to the same location on your wiki
6. Get users to include the script by editing their monobook.js. (Note: The easiest way to do this without creating a user MarkS is adding an accordant line in [MonoBook].php (the php of your skin)!) You might be able to do this the same way that it works on Wikipedia (see the top of this article). Alternatively use the following lines (changing the URL as necessary):

importScriptURI('//en.wikipedia.org/w/index.php?title=User:MarkS/extraeditbuttons.js&action=raw&ctype=text/javascript');

:7. Once the script is running you should move the images from MediaWiki to your own wiki (unless you have enabled InstantCommons, in which case you won't have to).

There may be other ways to install the script. For example it could be installed in common.js which would provide the script to all users. I have never tried this.

• Brian0918 who supplied the code to English Wikipedia from Hebrew Wikipedia
• Ingoolemo for supply the code for four of the buttons and the original GIF images (which I converted to PNG)
• Olliminatore for supplying a major rewrite of the code producing something significantly shorter and simpler
• Karl Dickman for converting some GIF images to PNG images

Extra edit buttons

de:User:Olliminatore/Extra-Editbuttons

es:User:Axxgreazz/Monobook-Suite/Botonera