MediaWiki:Common.js/edit: Difference between revisions

From OniGalore
Jump to navigation Jump to search
m (typo)
(blanking page, as XEB is dead now)
Tag: Replaced
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
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 [[wikipedia:User:MarkS|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:
{{fmbox
* Re-order the existing buttons.
  | text = This page is preserved for its history. It used to contain documentation for the extended editing toolbar script (XEB), but XEB was obsoleted by an update to the wiki software that removed the old toolbar.
* Add buttons to the toolbar from the pre-defined list below.
  }}
* Define new buttons, and even attach pop-up dialogs to them.
 
{|align=right width=256px border=1
|+'''Legend for All Toolbar Buttons'''<br />(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|Advanced image]]
|-
|B
|Line break (<nowiki>br /></nowiki>)
|-
|C
|Centered text
|-
|D
|Left-aligned text
|-
|D1
|Right-aligned text
|-
|E
|Simple table
|-
|E1
|[[#Smart Table|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 (<nowiki>&nbsp;</nowiki>)
|-
|O
|Code-style text
|-
|P
|Pre-formatting (pre) tags
|-
|P1
|Subpage link
|-
|Q
|Definition (tabbed) list
|-
|R
|[[#Reference Buttons|Reference tags]]
|-
|R1
|[[#Reference Buttons|Reference Wizard]]
|-
|R2
|[[#Reference Buttons|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
|[[wikipedia:Wikipedia:Substitution|Substitution]]
|}
 
==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 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 [[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>
XEBOrder2="0,1,U,F,D,C,D1,4,A,2,3,E,G,8,H,9".split(",");
</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 your custom JS page:
<code>
XEBOrder="9,0,1,U,F,D,C,D1,4,A,2,3,E,G,8,H";
importScript('MediaWiki:Common.js/edit.js');
</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 [[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==
As you can see on the right, there's lots more choices available than what the default toolbar provides.  For instance, here's [[User:Iritscen|my]] custom toolbar code:
 
{{User:Iritscen/vector.js}}
 
You might be wondering why I have a commented-out line that sets <tt>myButtons</tt>. 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 <tt>myButtons</tt> variable on your custom JS page. The format of <tt>myButtons</tt> is:
 
<pre>
myButtons={'_CODE1':['url1','Tooltip1','Before1','After1','Text1'],
'_CODE2':['url2','Tooltip2','Before2','After2','Text2']};
</pre>
 
where:
 
* <tt>CODE</tt> is a code for the button. You should place this code in <tt>XEBOrder</tt> 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.
* <tt>url</tt> 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 "http://wiki.oni2.net/w/images/e/ec/Button_base.png"] rather than [http://wiki.oni2.net/File:Button_base.png "http://wiki.oni2.net/File:Button_base.png"] (incidentally, you can use that image as the base for a new button icon).
* <tt>Tooltip</tt> is the pop-up tooltip that will appear when the mouse moves over the button.
* <tt>Before</tt> is the text to insert before the current cursor location.
* <tt>After</tt> is the text to place after the current cursor location.
* <tt>Text</tt> is the text that is placed between <tt>Before</tt> and <tt>After</tt>. If the user has selected text in the edit box, when the button is pressed this selected text will be placed between <tt>Before</tt> and <tt>After</tt> instead of <tt>Text</tt>.
 
This example defines two extra buttons:
 
<pre>
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']};
</pre>
 
For more examples and usable buttons, see the [[wikipedia:User:Willscrlt/Voting buttons|!voting/discussion buttons]] made by [[wikipedia:User:Willscrlt|Willscrlt]] of Wikipedia.
 
==Special button instructions==
===Reference Buttons===
The buttons for placing a reference come in two flavors:
# Button 'R' adds basic reference tags to some selected text.
# Button 'R1' calls up a dialog to create a named reference (names are used for referring [[wikipedia:Wikipedia:Referencing_for_beginners#Same_reference_used_more_than_once|more than once]] to the same source citation).
 
'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


[[Category:Policies and documentation]]
[[Category:Policies and documentation]]

Latest revision as of 14:24, 25 July 2020