OpenWetWare:Software/Projects/Editor/Toolbar

Adding the formula editor to OWW would be great. To get it to work, I've first inserted a new set of pages to OWW that implement a set of extension to the standard editor that will be pretty useful by themselves. There's a much-needed simple table form that will be a blessing in addition to providing the basis for the formula editor.

This is a Javascript extension. It's not globally enabled it yet. However, it's in place and working for anyone who wants to test it.

To add it, edit the link below with your "User_Name" and open it:

[[User:User_Name/monobook.js]]

Once you have the link open in your editor, insert the following expression:

document.write('<script type="text/javascript" ' +
    'src="http://openwetware.org/index.php?' +
    'title=MediaWiki:extraeditbuttons.js' +
    '&action=raw&ctype=text/css&dontcountme=s"></script>');

Save the document, following the visible instructions to force the current page to reload to your browser.

If you already are using this (anyone can do it by either hosting the pages in any editable OWW page or even from a remote wiki), beware that the set of icons you're using may change. Until we have a better way to configure the loaded buttons, adding new ones is a bit of a challenge. Consult with me if you need help.

Original Extension Page

"Extra edit buttons" wiki page

Button List

This button list is currently specific to OWW. While we evolve a set of buttons that reflects the needs of OWW users and works here, using the common Wikipedia pages as a place to share this from is difficult. As long as the basic framework is used, we can submit for the rest of the world to use them if more are developed.

The buttons

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).

Icon	Name	Standard	Code	Popup	Installed in OWW	Comments / What is shown when editing
	Bold		0			'''Bold text'''
	Italic		1			''Italic text''
	Wiki link		2			[[Link title]]
	Web link		3			[http://www.example.com link title]
	Heading		4			== Headline text ==
	Image		5			[[Image:Example.jpg]]
	Media File Link		6			[[Media:Example.ogg]]
	Mathematical Formula		7			<math>Insert formula here</math>
	No Wiki		8			<nowiki>Insert non-formatted text here</nowiki>
	Signature		9			-- ~~~~
	Horizontal Line		10			----
	Secondary Headline	*	A			===Secondary headline===
	Line break		B			<br />
	Align left	*	D			<div style="text-align: left; direction: ltr; margin-left: 1em;"> Left-aligned text </div>
	Centred text	*	C			<div style="text-align: center;"> Centred text </div>
	Align Right	*	D1			<div style="text-align: right; direction: ltr; margin-left: 1em;"> Right-aligned text </div>
	Coloured text	*	F			<span style="color: ColourName">Coloured text</span>
	Underline	*	U			<u>Underlined text</u>
	Strike through text	*	S			<s>Struck out text</s>
	Superscript		I1			<sup></sup>
	Subscript		I2			<sub>Subscript text</sub>
	Small text	*	J1			<small>Small Text</small>
File:Button latex.png	Insert Latex					<math>LaTex Expression</math>
	Insert table	*	E	Yes		Displays a popup allow the user to set the type of table they want. Typical markup inserted: {| class="wikitable" |- | 1 || 2 |- | 3 || 4 |}
	Insert a gallery	*	G			<gallery> Image:M63.jpg|[[M63]] Image:Mona Lisa.jpg|[[Mona Lisa]] Image:Truite arc-en-ciel.jpg|A [[trout]] </gallery>
	Definition list	*	Q			; Definition : Item 1 : Item 2
	Numbered list	*	W			# Element 1 # Element 2 # Element 3
	Bulleted list	*	X			* Element 1 * Element 2 * Element 3
	Category	*	K			[[Category:Category name]]
	Tabs	*	L			:
	Block quote text	*	M			<blockquote style="border: 1px solid blue; padding: 2em;"> Block quote </blockquote>
	Comment	*	H			<!--Comment-->
	Insert code	*	O			<code>Code</code>
	Reference (see below)	*	R	Yes		<ref>Insert reference material</ref>
	Add a template	*	T			{{Template name}}
	Redirect		V			#REDIRECT [[Article Name]]
	Unsigned post		FS			{{subst:unsigned|user name or IP|date}}
	Big text		J2			<big>Big text</big>
	Non breaking space		N
	Pre formatted text		P			<pre>Pre formatted text</pre>
	Link to a sub page		P1			[[Page/Sub_Page]]
	Start a reference (see below)		R1			<ref name="Reference name
	Add reference material		R2			(see notes below)
	End a reference (see below)		R3
	Reference footer		R4			==Notes== <!--See http://en.wikipedia.org/wiki/Wikipedia:Footnotes for an explanation of how to generate footnotes using the <ref(erences/)> tags--> <div class='references-small'> <references/> </div>
	Teletype text		T1			<tt>Teletype Text</tt>
	Substitute template		TL			{{subst:tl|Template name}}
	Start a table		TS			{|
	Table cell		TC			|
	Table row		TR			|-
	End a table		TE			|}
	No include		Y1			<noinclude>Text</noinclude>
	Include only		Y2			<includeonly>Text</includeonly>
	Substitute		Z			{{subst:Template}}
	Advanced image		AI			[[Image:M63.jpg|thumb|right|px|Caption]]
	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').

Reference Buttons

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

Changing the layout: XEBOrder

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:

<source lang=javascript>
XEBOrder="A,B,C,E,G,I1,I2,R1,R2,R4,T1,Y1,Y2,Z,AI,N";
document.write('<script type="text/javascript" src="' 
             + 'http://en.wikipedia.org/w/index.php?title=User:MarkS/Extra edit buttons/dev.js' 
             + '&action=raw&ctype=text/javascript&dontcountme=s"></script>');
</source>

Removing buttons: rmEditButtons

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

<source lang=javascript> rmEditButtons=[0,2] </source>

will remove buttons 0 and 2 from your toolbar.

<source lang=javascript> rmEditButtons=['all'] </source>

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.

Standard Wikipedia buttons

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.

User defined buttons: myButtons

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:

<source lang=javascript> myButtons={'_CODE1':['url1','Tooltip1','Before1','After1','Text1'],

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

</source>

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 rather than 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:

<source lang=javascript> 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']}; </source>

Pictures for myButtons

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:ButtonToolbar 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!

• 
• 
• 
• 
• 
• 
• 
• 

  Advanced image

• 

  Align left MOVE TO COMMONS

• 

  Align right

• 
• 
• 
• 

  Insert table

• 
• 
• 
• 
• 
• 

  Big txt

• 
• 
• 
• 
• 

  Block quote text MOVE TO COMMONS

• 
• 
• 
• 

  Category

• 
• 
• 

  Centred text MOVE TO COMMONS

• 
• 
• 
• 

  Insert code MOVE TO COMMONS

• 
• 

  Comment

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

  Definition list MOVE TO COMMONS

• 
• 
• 
• 
• 
• 

  Line break MOVE TO COMMONS

• 
• 
• 
• 
• 
• 
• 
• 
• 

  Coloured text MOVE TO COMMONS

• 
• 
• 

  MOVE TO COMMONS

• 
• 
• 
• 
• 
• 

  MOVE TO COMMONS

• 
• 

  Secondary headline MOVE TO COMMONS

• 

  MOVE TO COMMONS

• 
• 

  Include only

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

  MOVE TO COMMONS

• 
• 
• 

  Unsigned post

• 
• 
• 

  Non breaking space

• 
• 

  No include

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

  Add a template

• 
• 
• File:Button plume 1.png
• 
• 
• 

  Pre formatted text

• 
• 
• 
• 
• 
• 
• 

  Redirect MOVE TO COMMONS

• 
• 
• 
• 

  Reference

• 

  Add reference material

• 

  End a reference

• 
• 
• 
• 
• 
• 
• 

  MOVE TO COMMONS

• 

  Small text MOVE TO COMMONS

• 
• 

  Strike through text MOVE TO COMMONS

• 
• 
• 
• 
• 
• 
• 

  Subscript

• 

  Link to a sub page MOVE TO COMMONS

• 

  Substitute

• 

  Superscript

• 
• 
• 
• 
• 

  Reference footer

• 
• 
• 
• 

  Substitute template

• 
• 
• 
• 
• 
• 

  Underline

• 

  MOVE TO COMMONS

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• File:Button1.PNG
• 
• 
• 

  Numbered list

• 

  Insert a gallery

• 

  Bulleted list

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

  Teletype text

• 

  Table cell

• 

  End a table

• 

  Table row

• 

  Start a table

• 
• 
• 
• 
• 

Popups

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:

Button Code	Button Description	Comment
GEO	GEO Link	Allows the user to set: Latitude and Longitude. You can enter just the degrees, the degrees and minutes or the degrees, minutes and seconds. Should the location appear in the title bar or in the middle of the page The type of location (city/landmark...). The region of the location The popup then generates a coor template.
E	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.
AI	Advanced Image	Allows the user to set: Image Size Image location Image caption Image URL
R	Reference	Allows the user to set: The name of the footnote The text of the footnote