MediaWiki:Common.js/edit

The only code MediaWiki:Common.js/edit.js contains is the Extra edit buttons script (XEB) (a small additional piece of support is found in MediaWiki:Live.css). XEB was written by MarkS of Wikipedia, and it is used on OniGalore to add buttons to the toolbar for all editors. However, by reading the documentation below, you can take things a step further and use XEB to customize the toolbar as it appears for only you. You can:

• Re-order the existing buttons.
• Add buttons to the toolbar from the pre-defined list below.
• Define new buttons, and even attach pop-up dialogs to them.

Legend for All Toolbar Buttons
(Buttons 0-10 are built-in)

0	Bold
1	Italic
2	Wiki link (internal link)
3	Web link (external link)
4	==Headline Level 2==
5	Image link
6	Media file link
7	Math formula
8	No Wiki (anti-formatting) tag
9	Signature
10	Horizontal line
A	===Headline Level 3===
AI	Advanced image
B	Line break (br />)
BF	BSL function template wizard
BV	BSL variable template wizard
C	Centered text
D	Left-aligned text
D1	Right-aligned text
E	Simple table
E1	Smart table wizard
F	Colored text
FS	Unsigned post template
G	Image gallery
H	Comment
I1	Superscript text
I2	Subscript text
J1	Small text
J2	Big text
K	Category
L	Tabs
M	Block quote
N	Space ( )
O	Code-style text
P	Pre-formatting (pre) tags
P1	Subpage link
Q	Definition (tabbed) list
R	Reference tags
R1	Reference Wizard
R2	Insert reference footer
S	Strike-through text
T	Template
T1	Teletype (monospaced) text
TC	Table cell
TE	Table end
TL	Substitute template
TR	Table row
TS	Start table
U	Underlined text
V	Redirect link
W	Numbered list
X	Bulleted list
Y1	noinclude tags
Y2	includeonly tags
Z	Substitution

Re-ordering the buttons

When you load a page in editing mode, XEB looks for a pre-defined string variable called XEBOrder to know which buttons to place in the toolbar in which order. If this variable does not exist yet, XEB uses its own hardcoded value in order to provide a default editing toolbar. To set this variable and get your own custom toolbar, you use a custom JavaScript page under your user name called User:YourName/vector.js.

The default button order is currently:
XEBOrder2="0,1,U,F,D,C,D1,4,A,2,3,E,G,8,H,9,BF,BV".split(",");

Let's say that you wanted to move the "Insert signature" button all the way to the left side of the toolbar. Looking at the table on the right, you can see that the signature button has the ID "9", so you would add this text to your custom JS page:
XEBOrder="9,0,1,U,F,D,C,D1,4,A,2,3,E,G,8,H,BF,BV";

Notice that the "9" comes first now. You will not see the "Insert signature" button move up in the actual toolbar, however, until your cache is cleared. You can clear your cache and refresh a page while in editing mode to see the change take effect before your eyes.

Defining new buttons

As you can see on the right, there's lots more choices available than what the default toolbar provides. XEB can also work with extra buttons created by the user. To do this you must define the myButtons variable on your custom JS page. The format of the myButtons initialization, if you were to add two new buttons, would be:

myButtons={'_CODE1':['url1','Tooltip1','Before1','After1','Text1'],
           '_CODE2':['url2','Tooltip2','Before2','After2','Text2']};

where:

• CODE is the code that you will be placing in XEBOrder to make this 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 actual image, rather than the Image page that describes the button, so use: "http://wiki.oni2.net/w/images/e/ec/Button_base.png" rather than "http://wiki.oni2.net/File:Button_base.png" (incidentally, you can use that image as the base for a new button icon).
• Tooltip is the pop-up 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 editing area, then clicking this button will place the existing text between Before and After instead of inserting Text.

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 of Wikipedia.

Special button instructions

Reference Buttons

The buttons for placing a reference (a source citation or footnote) come in two flavors:

1. Button 'R' adds basic reference tags to some selected text.
2. Button 'R1' calls up a dialog to create a named reference (names are used for referring more than once to the same source citation).

Once you've created some references using either of those buttons, 'R2' is used for placing the footer at the bottom of an article that lists all the footnotes based on the article's ref tags.

Smart Table Wizard

Allows the user to set:

• Number of rows
• Number of columns
• If the table is sortable
• Whether or not a title row is required.

Advanced Image

Allows the user to set:

• Image size
• Image location
• Image caption
• Image URL

BSL Template Wizards

Allow the user to insert calls to the BSLfuncinfo and BSLvarinfo templates, used for listing functions and variables in the BSL documentation.