MediaWiki:Common.js/edit: Difference between revisions

From OniGalore
Jump to navigation Jump to search
m (→‎Defining new buttons: wording/formatting)
Line 171: Line 171:


==Re-ordering the buttons==
==Re-ordering the buttons==
XEB parses a string variable called <tt>XEBOrder</tt> to know which buttons to place in the toolbar in which order.  If there is no <tt>XEBOrder</tt> variable defined already, it supplies the value for <tt>XEBOrder</tt> from the hardcoded variable <tt>XEBOrder2</tt>. Therefore, you can use the custom JavaScript page provided by MediaWiki, [[Special:MyPage/monobook.js|monobook.js]], to set <tt>XEBOrder</tt>, and if you then run the XEB code afterwards, it will use your own button-order string.
XEB parses a string variable called <tt>XEBOrder</tt> to know which buttons to place in the toolbar in which order.  If there is no string passed in to set <tt>XEBOrder</tt>, it 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, such as [[Special:MyPage/monobook.js|User:YourName/monobook.js]] or [[Special:MyPage/vector.js|User:YourName/vector.js]].


First, look at the page with [[XEB]]'s code -- find the <tt>initButtons()</tt> function, and you'll see the default button order:
First, look at [[MediaWiki:Common.js/edit.js|the edit.js page]] with XEB's code -- find the <tt>initButtons()</tt> function, and you'll see the default button order (actually called <tt>XEBOrder2</tt>):


<code>
<code>
Line 179: Line 179:
</code>
</code>


Let's say that you wanted to move the "Insert signature" button from the right 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 [[Special:MyPage/monobook.js|your monobook.js]]:
Let's say that you wanted to move the "Insert signature" button from the right 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:
<code>
<code>
XEBOrder="9,0,1,U,F,D,C,D1,4,A,2,3,E,G,8,H";
XEBOrder="9,0,1,U,F,D,C,D1,4,A,2,3,E,G,8,H";
Line 185: Line 185:
</code>
</code>


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. [[wikipedia:Bypass_your_cache|Here are some instructions]] from Wikipedia, but if you are using a Mac and Google Chrome, you should be hitting Shift-Reload to refresh the cache for the page. Note that you will have to be on a wiki page in editing mode before trying this if you want to see the change take effect before your eyes.
Notice that the "9" comes first now.  You will not see the "Insert signature" button move up in the actual toolbar, however, until your [[wikipedia:WP:BYPASS|cache is cleared]]. Note that you will have to be on a wiki page in editing mode before trying this if you want to see the change take effect before your eyes.


==Adding buttons==
==Adding buttons==

Revision as of 20:58, 5 May 2012

The Extra edit buttons script (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 />)
C Centered text
D Left-aligned text
D1 Right-aligned text
E Smart Table
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 name tag
R2 Add reference material
R3 End reference
R4 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

XEB parses a string variable called XEBOrder to know which buttons to place in the toolbar in which order. If there is no string passed in to set XEBOrder, it 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, such as User:YourName/monobook.js or User:YourName/vector.js.

First, look at the edit.js page with XEB's code -- find the initButtons() function, and you'll see the default button order (actually called XEBOrder2):

XEBOrder2="0,1,U,F,D,C,D1,4,A,2,3,E,G,8,H,9".split(",");

Let's say that you wanted to move the "Insert signature" button from the right 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"; importScript('MediaWiki:Common.js/edit.js');

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. Note that you will have to be on a wiki page in editing mode before trying this if you want to see the change take effect before your eyes.

Adding buttons

As you can see on the right, there's lots more choices available than what the default toolbar provides. For instance, here's my custom toolbar code:

User:Iritscen/monobook.js

You might be wondering why I have a commented-out line that sets myButtons. What's that for?

Defining new buttons

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 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://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 edit box, when the button is pressed this selected text will be placed between Before and After instead of 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 reference buttons come in two flavors:

  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 three of these buttons or none of them.

Smart Table

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