MediaWiki:Common.js/edit - Revision history

Iritscen: blanking page, as XEB is dead now

2020-07-25T14:24:55Z

blanking page, as XEB is dead now

Iritscen: update

2020-05-25T14:17:45Z

update

← Older revision		Revision as of 14:17, 25 May 2020
Line 1:		Line 1:
			{{update}}
	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:		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:
	* Re-order the existing buttons.		* Re-order the existing buttons.

Iritscen: update for new XEB usage; minor rewrite

2017-08-06T23:44:00Z

update for new XEB usage; minor rewrite

← Older revision		Revision as of 23:44, 6 August 2017
Line 174:		Line 174:

	==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 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]].		When you load a page in editing mode, XEB looks for a pre-defined string variable called <tt>XEBOrder</tt> 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 [[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>):

			The default button order is currently:<br />
	<code>		<code>
	XEBOrder2="0,1,U,F,D,C,D1,4,A,2,3,E,G,8,H,9".split(",");		XEBOrder2="0,1,U,F,D,C,D1,4,A,2,3,E,G,8,H,9,BF,BV".split(",");
	</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 your custom JS page:		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:<br />
	<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,BF,BV";
	~~importScript('MediaWiki:Common.js/edit.js')~~;
	</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 [[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.		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]]. You can clear your cache and refresh a page while in editing mode 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==		==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:		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 <tt>myButtons</tt> variable on your custom JS page. The format of the <tt>myButtons</tt> initialization, if you were to add two new buttons, would be:

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

	where:		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>CODE</tt> is the code that you will be placing in <tt>XEBOrder</tt> 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.
	* <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>url</tt> 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 "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>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>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>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>.		* <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 editing area, then clicking this button will place the existing text between <tt>Before</tt> and <tt>After</tt> instead of inserting <tt>Text</tt>.

	This example defines two extra buttons:		This example defines two extra buttons:

	<pre>		<pre>
	myButtons={'_ZZ':['http://upload.wikimedia.org/wikipedia/commons/e/e9/Button_headline2.png',		myButtons={'_ZZ':['http://upload.wikimedia.org/wikipedia/commons/e/e9/Button_headline2.png', 'Mark Test', 'Before', 'After', 'Middle'],
	'Mark Test','Before','After','Middle'],'_ZA':'http://upload.wikimedia.org/wikipedia/commons/1/13/		'_ZA':['http://upload.wikimedia.org/wikipedia/commons/1/13/Button_enter.png', 'Mark2 Test', '111', '333', '222']};
	Button_enter.png','Mark2 Test','111','333','222']};
	</pre>		</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.		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==		==Special button instructions==
	===Reference Buttons===		===Reference Buttons===
	The buttons for placing a reference come in two flavors:		The buttons for placing a reference (a source citation or footnote) come in two flavors:
	# Button 'R' adds basic reference tags to some selected text.		# 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).		# 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.		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===		===Smart Table Wizard===

Iritscen: /* Advanced Image */ capitalization

2016-12-30T00:18:39Z

Advanced Image: capitalization

← Older revision		Revision as of 00:18, 30 December 2016
Line 241:		Line 241:
	===Advanced Image===		===Advanced Image===
	Allows the user to set:		Allows the user to set:
	* Image ~~Size~~		* Image size
	* Image location		* Image location
	* Image caption		* Image caption

Iritscen: link fixes

2015-12-08T16:37:25Z

link fixes

← Older revision		Revision as of 16:37, 8 December 2015
Line 247:		Line 247:

	===BSL Template Wizards===		===BSL Template Wizards===
	Allow the user to insert calls to the [[Template:~~BSLfunc~~\|~~BSLfunc~~]] and [[Template:~~BSLvar~~\|~~BSLvar~~]] templates, used for listing functions and variables in the [[:Category:BSL_docs\|BSL documentation]].		Allow the user to insert calls to the [[Template:BSLfuncinfo\|BSLfuncinfo]] and [[Template:BSLvarinfo\|BSLvarinfo]] templates, used for listing functions and variables in the [[:Category:BSL_docs\|BSL documentation]].

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

Iritscen: link fix

2015-12-03T03:36:52Z

link fix

← Older revision		Revision as of 03:36, 3 December 2015
Line 247:		Line 247:

	===BSL Template Wizards===		===BSL Template Wizards===
	Allow the user to insert calls to the [[Template:BSLfunc\|BSLfunc]] and [[Template:BSLvar\|BSLvar]] templates, used for listing functions and variables in the [[:Category:~~Bungie_scripting_language_docs~~\|BSL documentation]].		Allow the user to insert calls to the [[Template:BSLfunc\|BSLfunc]] and [[Template:BSLvar\|BSLvar]] templates, used for listing functions and variables in the [[:Category:BSL_docs\|BSL documentation]].

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

Iritscen: documenting BSL variable template wizard

2015-11-26T05:35:57Z

documenting BSL variable template wizard

← Older revision		Revision as of 05:35, 26 November 2015
Line 51:		Line 51:
	\|BF		\|BF
	\|[[#BSL Template Wizards\|BSL function template wizard]]		\|[[#BSL Template Wizards\|BSL function template wizard]]
			\|-
			\|BV
			\|[[#BSL Template Wizards\|BSL variable template wizard]]
	\|-		\|-
	\|C		\|C
Line 244:		Line 247:

	===BSL Template Wizards===		===BSL Template Wizards===
	~~Allows~~ the user to insert ~~a call~~ to the [[Template:BSLfunc\|BSLfunc]] ~~template~~, used for listing ~~BSL~~ functions in the [[:Category:Bungie_scripting_language_docs\|BSL documentation]].		Allow the user to insert calls to the [[Template:BSLfunc\|BSLfunc]] and [[Template:BSLvar\|BSLvar]] templates, used for listing functions and variables in the [[:Category:Bungie_scripting_language_docs\|BSL documentation]].

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

Iritscen: documenting BSL function template wizard

2015-11-25T20:44:29Z

documenting BSL function template wizard

← Older revision		Revision as of 20:44, 25 November 2015
Line 48:		Line 48:
	\|B		\|B
	\|Line break (<nowiki>br /></nowiki>)		\|Line break (<nowiki>br /></nowiki>)
			\|-
			\|BF
			\|[[#BSL Template Wizards\|BSL function template wizard]]
	\|-		\|-
	\|C		\|C
Line 239:		Line 242:
	* Image caption		* Image caption
	* Image URL		* Image URL

			===BSL Template Wizards===
			Allows the user to insert a call to the [[Template:BSLfunc\|BSLfunc]] template, used for listing BSL functions in the [[:Category:Bungie_scripting_language_docs\|BSL documentation]].

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

Iritscen: link fix

2015-11-18T03:16:37Z

link fix

← Older revision		Revision as of 03:16, 18 November 2015
Line 62:		Line 62:
	\|-		\|-
	\|E1		\|E1
	\|[[#Smart Table\|Smart table wizard]]		\|[[#Smart Table Wizard\|Smart table wizard]]
	\|-		\|-
	\|F		\|F

Iritscen: typo

2015-11-15T14:12:51Z

typo

← Older revision		Revision as of 14:12, 15 November 2015
Line 1:		Line 1:
	The only ~~thingf~~ [[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:		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:
	* Re-order the existing buttons.		* Re-order the existing buttons.
	* Add buttons to the toolbar from the pre-defined list below.		* Add buttons to the toolbar from the pre-defined list below.